vue element upload 组件实现多个文件一个接口上

upload 组件中上传文件会调多次接口，一个文件一个文件进行上传，现在需求需要在一个接口里上传多个文件，那我们就要对这个组件做一下改造。

html 部分

<el-upload
          drag
          multiple
          action="/"
          name='files'
          :show-file-list="false"
          :auto-upload='false'
          :on-change='uploadChange'
          ref="upload"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击选择文件</em></div>
        </el-upload>
        <div style="margin:20px 0;">您一共选择了 {{fileList.length}} 个文件</div>
        <el-button class="addUser" style="width:100px" @click="upload()">上传到服务器</el-button>

js 部分

//uploadchange 事件
uploadChange(file,fileList){
      this.fileList=fileList
    },
//点击上传
    async upload(){
      //new formData对象
      let formData=new FormData();
      this.fileList.forEach((item)=>{
        //将文件添加到 formData 中
        formData.append('files',item.raw)
      })
      //其他参数
      formData.append('orderId',this.id);
      formData.append('uploadType',this.type);
      //调用上传接口
      let res=await upload_api(formData);
    },

结果

image.png image.png