vue，Vuetify，SpringBoot 实现多文件上传

前端：vue+Vuetify

HelloWorld.vue

<template>
  <v-container fluid>
    <v-form ref="uploadFileForm" v-model="uploadFormValid">
      <v-row>
        <v-col cols="3">
          文件：
        </v-col>
        <v-col>
          <v-file-input v-model="fileInfo" @change="uploadFile" multiple show-size counter small-chips
            :rules="[v => !!v || '文件必选']" label="File input" accept="image/*" prepend-icon="mdi-file"></v-file-input>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="3">
          文本：
        </v-col>
        <v-col>
          <v-select v-model="select" :hint="`${select.state}, ${select.abbr}`" :items="items" item-text="state"
            item-value="abbr" label="Select" persistent-hint return-object single-line></v-select>
        </v-col>
      </v-row>
    </v-form>
  </v-container>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        select: {
          state: 'Florida',
          abbr: 'FL'
        },
        items: [{
            state: 'Florida',
            abbr: 'FL'
          },
          {
            state: 'Georgia',
            abbr: 'GA'
          },
          {
            state: 'Nebraska',
            abbr: 'NE'
          },
          {
            state: 'California',
            abbr: 'CA'
          },
          {
            state: 'New York',
            abbr: 'NY'
          },
        ],
        fileInfo: null,
        uploadFormValid: null,
        textInfo: "123123"
      }
    },
    methods: {
      // 上传文件方法
      uploadFile() {
        console.log(this.fileInfo, '文件信息');
        if (this.$refs.uploadFileForm.validate()) {
          var formData = new window.FormData();
          let files = Array.from(this.fileInfo);
          files.forEach((file) => {
            formData.append("file", file);
          });
          formData.append('textInfo', "123");
          axios.post("http://localhost:8080/helloWorld/method02", formData, {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          });
        }
      }
    }
  }
</script>

 前端效果：

后台Springboot 接口控制器

    @ResponseBody
    @PostMapping("/method02")
    public String method02(ReqFileData reqFileData) {
        if (null != reqFileData) {
            try {
                MultipartFile[] files = reqFileData.getFile();
                if (null != files) {
                    for (MultipartFile file : files) {
                        File f = new File("F:\\upload\\" + file.getOriginalFilename());
                        //创建父目录
                        if (!f.getParentFile().exists()) {
                            f.getParentFile().mkdir();
                        }
                        file.transferTo(f);
                    }
                }else {
                    return "fail";
                }
            } catch (IOException e) {
                return "fail";
                //e.printStackTrace();
            }
            String textInfo = reqFileData.getTextInfo();
        }
        return "ok";
    }

 

import org.springframework.web.multipart.MultipartFile;

/**
 * 数据接收实体类
 */
public class ReqFileData {

    private MultipartFile[] file;
    private String textInfo;

    public MultipartFile[] getFile() {
        return file;
    }

    public void setFile(MultipartFile[] file) {
        this.file = file;
    }

    public String getTextInfo() {
        return textInfo;
    }

    public void setTextInfo(String textInfo) {
        this.textInfo = textInfo;
    }
}