在vue中，使用el-upload组件，完成多个文件，一次请求批量上传

在vue中，使用el-upload组件，完成多个文件，一次请求批量上传

直接贴代码：

<el-upload
    class="upload-demo"
    ref="uploadFile"
    name="filedatas"
    :headers="{ Authorization: `${$store.state.user.userInfo.token}`}"
    :action="$interfaces.api.uploadBatch"
    :auto-upload="false"
    multiple
>
     <el-button slot="trigger" size="small" type="primary">批量上传文件</el-button>
     <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交到后台</el-button>
</el-upload>

public submitUpload() {
    
    
    //@ts-ignore
    let {
    
    uploadFiles, action, data} = this.$refs.uploadFile;
    //@ts-ignore
    this.uploadFiles({
    
    
      uploadFiles,
      data,
      action,
      success: (response:any) => {
    
    
        //@ts-ignore
        this.$refs.uploadFile.clearFiles();
      },
      error: (error:any) => {
    
    
        console.log('失败了', error)
      }
    })
  }

public uploadFiles({
     
     uploadFiles, headers, data, action, success, error}) {
    
    
    let form = new FormData()
    // 文件对象
    //@ts-ignore
    uploadFiles.map(file => form.append("files", file.raw))
    // 附件参数
    for (let key in data) {
    
    
      form.append(key, data[key])
    }
    let xhr = new XMLHttpRequest()
    // 异步请求
    xhr.open("post", action, true)
    // 设置请求头
    xhr.setRequestHeader("Authorization", this.$store.state.user.userInfo.token);
    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)
  }

核心就是将多个上传文件合并成一个文件，使用XMLHttpRequest 手动写一个请求fn，完成上传。为了方便可以手动封装成一个单独的上传fn，方便以后的使用。