element-ui实现一次性传多个文件

先上代码

可以看到在提交前，form.docFile的内容为

1.png

如果就这样直接提交，后台是接收不到docFile的值的

用springboot做后台，使用 MultipartFile[] 接收多文件

12320369-96530151799a38ce.png

在发post请求前，使用formData
往docFile赋予多值formData.append('docFile', file)

  upload(data) {
    let method = 'POST';
    let uploadUrl = userfileUrl + '/upload';
    let body = new FormData();

    Object.keys(data).forEach(key => {
      if (key === 'docFile') {
        for (let value of data[key]) {
          body.append(key, value);
        }
      } else {
        body.append(key, data[key]);
      }
    });

    console.log('docFile', body.getAll('docFile'));

    return api.fetch({url: uploadUrl, method, body, file: true});
  },

打印出来看看docFile

3.png

可以看到，我们的form.docFile，和我们现在打印出来的formData的docFile不一样，
formData里面是File[]数组
可以用 MultipartFile[] 接收到

结论

使用 formData 来实现多文件一次性上传
比如要传多文件的字段为 "file[]"
那么 formData.append('file[]', file) 即可