ElementUI中Upload如何批量上传

前言#

最近一直使用Element提供的文件上传组件，但是使用后发现，其实当我们批量选中的时候，文件不是一次性都上传进去的，而是把它又拆分成一个个的文件进行上传。首先这容易造成的问题就是我们如果同时提交多个图片文件的时候，会重复的请求接口，造成接口并发访问的时可能出现的问题，下面是Element 的Github写的一个Issue

地址：Element

上面也是提出了这个问题，就是希望能够合并请求提交，但是得到的官方回复却是：这个合并提交不在计划内，并不打算支持。

解决方案#

后面通过查看issue发现，有一篇能够解决图片合并上传的需求：issue

主要是定义了两个方法，首先就是我们写的upload组件

1
      <el-upload
2
        class="upload-demo"
3
        ref="uploadFile"
4
        name="filedatas"
5
        :headers="importHeaders"
6
        :action="uploadAdminHost"
7
        :auto-upload="false"
8
        multiple
9
      >
10
        <el-button slot="trigger" size="small" type="primary">选取博客文件</el-button>
11
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交到服务器</el-button>
12
      </el-upload>

然后我们是上传逻辑，我们首先获取到upload组件上的dom，然后获取文件，上传地址和数据

1
    // 文件上传
2
    submitUpload() {
3
      let {uploadFiles, action, data} = this.$refs.uploadFile
4
      this.uploadFiles({
5
        uploadFiles,
6
        data,
7
        action,
8
        success: (response) => {
9
          console.log(response)
10
          // 上传成功后，将里面的内容删除
11
          this.$refs.uploadFile.clearFiles();
12
          this.$refs.uploadPicture.clearFiles();
13
        },
14
        error: (error) => {
15
          console.log('失败了', error)
16
        }
17
      })
18
    },

下面封装了一个 uploadFiles 方法，这里uploadFiles 就可以是多文件，通过封装ajax方式

1
    /**
2
     * 自定义上传文件
3
     * @param fileList 文件列表
4
     * @param data 上传时附带的额外参数
5
     * @param url 上传的URL地址
6
     * @param success 成功回调
7
     * @param error 失败回调
8
     */
9
    uploadFiles({uploadFiles, headers, data, action, success, error}) {
10
      let form = new FormData()
11
      // 文件对象
12
      uploadFiles.map(file => form.append("filedatas", file.raw))
13
      // 附件参数
14
      for (let key in data) {
15
        form.append(key, data[key])
16
      }
17
      let xhr = new XMLHttpRequest()
18
      // 异步请求
19
      xhr.open("post", action, true)
20
      // 设置请求头
21
      xhr.setRequestHeader("Authorization", getToken());
22
      xhr.onreadystatechange = function() {
23
        if (xhr.readyState == 4){
24
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
25
            success && success(xhr.responseText)
26
          } else {
27
            error && error(xhr.status)
28
          }
29
        }
30
      }
31
      xhr.send(form)
32
    }

最后后台接口，同时接受多个文件

1
    @PostMapping("/pictures")
2
    public Object uploadPics(HttpServletRequest request, List<MultipartFile> filedatas) {
3
          // 逻辑代码
4
  }

最后我们查看请求，会同时携带多个文件

并且返回多个上传成功的结果