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
