网站建设公司模版门户模板
问题：
在使用Element Ui Upload 上传文件时，选择多个文件上传时，on-change事件会一个一个返回上传的文件，导致前端不知道什么时候可以拿到全部上传的文件，再一起调后台接口。
解决方法：
上传文件后，自动把文件传给后台，这里做了一个防抖，等待500ms后在传给后台
代码实现：
<el-upload class="upload-demo" ref="enclosureUpload" accept=".docx" :file-list="fileList" action multiple :limit="7"
:show-file-list="false" :auto-upload="false" :on-change="handleFileChange"
:on-exceed="handleExceed" >
<el-button type="info" size="small" plain round >
上传
</el-button>
</el-upload>
// 文件超出个数限制时的钩子
handleExceed (files, fileList) {
this.$message.warning(`限制选择7个文件，本次选择了 ${files.length} 个文件`);
},
// 上传附件 过滤重复
filterRepetition (arr) {
let arr1 = []; //存id
let newArr = []; //存新数组
for (let i in arr) {
if (arr1.indexOf(arr[i].name) == -1) {
arr1.push(arr[i].name);
newArr.push(arr[i]);
}
}
return newArr;
},
// 修改 存放要上传的文件列表
handleFileChange (file, fileList) {
let arr = this.filterRepetition(fileList);
if (arr.length !== fileList.length) {
this.$message("上传重复文件，已过滤重复文件");
}
this.fileList = arr;
// 上传文件后，自动把文件传给后台，这里做了一个防抖，等待500ms后在传给后台
this.debounce(this.submitUpload, 500);
},
// element上传多个文件时，会把每个文件做个单独请求
// 这里的方法是请求最后一次
debounce (fn, waits) {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.timer = setTimeout(() => {
fn.apply(this, arguments); // 把参数传进去
}, waits);
},
// 确定
async submitUpload () {
if (this.fileList.length === 0) {
this.$message.success("请上传文件");
return;
}
let formData = new FormData(); // 用FormData存放上传文件
this.fileList.forEach((file) => {
formData.append("file", file.raw);
});
// 确定上传 把在上传列表里的文件 合并到formData里面传给后台
let res = await importXlsx(formData);
this.fileList = []
this.$message.success('上传成功')
}