[Feature Request] multiple files upload only with one request

[vasttian]

Existing Component

是

Component Name

upload

Description

现在的 upload 组件，前端可以选择多文件，但实际上是每个文件分开上传的，几个文件就会产生几个请求，请问是否可以多个文件只使用一个请求把多文件作为 list 来一次性上传。

[element-bot]

Translation of this issue:

Existing Component

yes

Component Name

Upload

Description

Now the upload component, front-end can select multiple files, but is actually separate each file upload several files, will have several requests, I would like to ask whether multiple files using only a request to list to upload files as disposable.

image

[Leopoldthecoder]

可以使用 http-request 属性，自定义上传逻辑。

[vasttian]

@Leopoldthecoder http-request 更改的只是上传函数，并不能更改submit()

, 当我的 uploadFiles 里有 4 个 ‘ ready’ 状态的文件，还是会循环 4 次发送四个 upload()，不知道我这样理解正不正确。

[Leopoldthecoder]

那可能需要 hack 一下，这样拿到选择的文件：https://jsfiddle.net/nqor0ghm/ ，然后自定义上传逻辑。

[vasttian]

@Leopoldthecoder 好的，谢谢。

[381510688]

@wdnlwzd 是否可以共享一下时如何实现的？

[vasttian]

@381510688 我是在拿到文件后，通过 axios 上传的。

[381510688]

@wdnlwzd 嗯嗯，了解了，多谢~~
下面是我的实现

// 文件上传处理
submitUpload() {
  let {uploadFiles, action, data} = this.$refs.uploadCsv
  this.uploadFiles({
    uploadFiles,
    action,
    data,
    success: (response) => console.log('成功了', response),
    error: (error) => console.log('失败了', error)
  })
}

/**
* 自定义上传文件
* @param fileList 文件列表
* @param data 上传时附带的额外参数
* @param url 上传的URL地址
* @param success 成功回调
* @param error 失败回调
*/
uploadFiles({uploadFiles, data, action, success, error}) {
  let form = new FormData()
  // 文件对象
  uploadFiles.map(file => form.append("file", file.raw))
  // 附件参数
  for (let key in data) {
    form.append(key, data[key])
  }
  let xhr = new XMLHttpRequest()
  // 异步请求
  xhr.open("post", action, true)
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4){
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        success && success(xhr.responseText)
      } else {
        error && error(xhr.status)
      }
    }
  }
  xhr.send(form)
}