2019-12-19 element-ui文件上传 一次请求上传

最近在做项目的时候有一个需求，需要导入word文档，并且需要支持多选。element-ui 的 upload 组件支持多选文件，只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传，于是就会存在多次的上传请求，由于后台的接口要求是一次请求能够上传多个文件，且我们也知道请求多了会对服务器造成更大的压力，因而基于多种原因，这个 upload 的上传行为得进行改造一番。

先来看下改造前后的结果

改造前的结果：同时上传2个文件，会发出2次对接口的请求，每次请求里包含了一个文件。

upload_result_before

改造后的结果：同时上传2个文件，会发出一次接口请求，接口入参里包含2个文件。

upload_result_after

方法一：通过配置file-list（推荐使用）

html部分：

    <el-upload action="/api/editEviCard.jhtml" accept="image/*" multiple :file-list="fileList"
      :on-change="fileChange" :on-remove="fileRemove" :auto-upload="false" style="display: inline-block;">
      <el-button type="primary" plain><i class="el-icon-upload el-icon--right"></i>点击选择身份证明文件（正反面两张，多选）</el-button>
      <div slot="tip">只能上传图片格式文件</div>
    </el-upload>
    <el-button style="margin-left: 10px;vertical-align: top;" type="success" plain @click="submitUpload">确认上传
    </el-button>

js部分：

  //检测文件变动获取文件
  fileChange(file, fileList) {
    this.fileList = fileList;
  }
  //检测文件删除
  fileRemove(file, fileList) {
    this.fileList = fileList;
  }
 //手动模拟提交上传
  submitUpload() {
    console.log("this.fileList", this.fileList)
    // this.$refs.upload.submit();
    let formData = new FormData();  //  用FormData存放上传文件
    this.fileList.forEach(file => {
      formData.append('file', file.raw)
    })

    // 调用上传接口
    editEviCard(formData).then((res) => {
      //手动上传无法触发成功或失败的钩子函数，因此这里手动调用 
      this.upSuccess(res)
    }, (err) => {
      this.upError(err)
    })
  }

  upSuccess(res) { //上传成功
    if (res.data.state === 100) {
      Message.success({
        message: "文件上传成功！"
      })
    } else {
      Message.error({
        message: "文件上传失败！"
      })
    }
  }

  upError(err) { //上传失败
    Message.error({
      message: "文件上传失败！"
    })
  }

关键代码说明：

• auto-upload 设置为 false 用于关闭组件的自动上传；
• file-list 配置一个数组用于接收上传的文件列表；
• multiple 设置为 true 表示支持多选文件；
• action 配置为完整的上传接口url，不配置会报错
• 不用配置 data、on-success、on-error等参数，因为手动上传不会用到这些配置信息；
• 最后通过点击按钮手动调用上传函数 submitUpload ，创建一个 FormData 把 fileList 的文件存进去。

方法二：通过配置http-request

html部分：

<el-upload
 class="upload-demo list-uploadbtn"
 ref="upload"
 :action="curBastUrl"
 :auto-upload="false"
 :http-request="uploadFile"
 :on-remove="updataRemove"
 :before-upload="beforeUpload"
 :on-change="updatachange"
 :multiple="true">
 <el-button size="small">点击上传</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">确 定</el-button>

js部分：

submitUpload() {  // 导入
 let tempData =  this.filedata
 this.filedata = new FormData()  //  用FormData存放上传文件
 this.$refs.upload.submit()  // 会循环调用uploadFile方法，多个文件调用多次

 this.filedata.append('categoryDirectory', tempData.categoryDirectory)

 // importCase是上传接口
 importCase(this.filedata).then((res) => { 
 //手动上传无法触发成功或失败的钩子函数，因此这里手动调用 
 this.updataSuccess(res.data) 
 }, (err) => {

 })
}
uploadFile(file) {
 this.filedata.append('file', file.file)
}

关键代码说明：

• http-request 自定义上传方法；
• 最后通过点击按钮手动调用上传函数 submitUpload ，创建一个 FormData, 调用 upload 组件的 submit 方法的时候会循环调用 http-request 配置的方法，从而往 FormData 里存放文件。