今天写项目用到了 element 的上传,要求是多选不限制上传数量,在使用时发现element都是一次一次调接口。在这里用到了http-request(覆盖默认的上传行为,可以自定义上传的实现),以及auto-upload:false(是否在选取文件后立即进行上传)来实现多选一次性上传。
html部分:
<el-upload
class="upload-demo"
ref="upload"
action="http://xxx/uploadFileOSS" //后端接口
multiple
:http-request="uploadFile"
:file-list="fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="saveEdit">提交</el-button>
js部分
data() {
return {
fileList: [],
}
}
methods(){
uploadFile(file) {
this.fileList.push(file.file);//取到选取的文件
},
saveEdit(){
this.$refs.upload.submit();
let formData = new FormData();
for (let i = 0; i < this.fileList.length; i++) {
formData.append('file', this.fileList[i]);//循环添加到formData,传给后端
}
uploadFileOSS(formData).then(res => { // 请求接口
console.log(res)
})
this.fileList=[] //上传成功清空fileList
}
}
本文地址:https://blog.csdn.net/huihuihaha222222/article/details/107233933
黄山市民网:https://www.huangshanshimin.com/