使用vant的Uploader组件+axios+springmvc进行多文件上传

1.前端

1.页面upload.vue,使用vant的Uploader 组件

  <van-uploader v-model="aaFiles" upload-text="附件列表1"/>    
  <van-uploader v-model="bbFiles" upload-text="附件列表2"/>

2.用FormData对象接收数据，使用axios上传文件到后端。

	let formData = new FormData();

  if (this.aaFiles.length > 0) {
     
        for (let index = 0; index < this.aaFiles.length; index++) {
     
          const element = this.aaFiles[index];
          //element.file取的是File文件对象
          formData.append("aaFiles", element.file);
        }
      }
  if (this.bbFiles.length > 0) {
     
        for (let index = 0; index < this.bbFiles.length; index++) {
     
          const element = this.bbFiles[index];
          formData.append("bbFiles", element.file);
        }
      }

 this.$api.common.uploadFiles(formData).then(res => {
     
        if (res.success) {
     
          console.log("上传成功");
        } else {
     
          console.log("上传失败");
        }
      });

直接给formData append 一个数组的话会变成一个字符串，这样后台拿不到文件信息。所以需要遍历循环append同一个键。如果指定的键已经存在，formdata的 append() 会把新值添加到已有值集合的后面。

uploadFiles是封装的上传文件api

//必须设置Content-Type为multipart/form-data才能进行文件上传
 uploadFiles(formData) {
     
    return axios.post("common/uploadFiles.do", formData, {
     
      timeout: 0, //无超时时间
      headers: {
      "Content-Type": "multipart/form-data" }
    });
  }

后端使用MultipartFile接收多文件列表

@RequestMapping(value = "uploadFiles.do",method = RequestMethod.POST)
    @ResponseBody
    public JsonModel uploadFiles( @RequestParam("aaFiles") MultipartFile[] aaFiles,
                                   @RequestParam("bbFiles") MultipartFile[] bbFiles) {
     

    }

参考资料：
FormData.append()
记一个 FormData 多文件上传问题