vue Element Ui Upload 上传 点击一个按钮,选择多个文件后直接上传,使用防抖解决多次上传的问题。

问题:

在使用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('上传成功')

}

相关推荐
gzzeason5 分钟前
React源码4 三大核心模块之一:Schedule,scheduleUpdateOnFiber函数
开发语言·javascript·ecmascript
十秒耿直拆包选手41 分钟前
web:js提示框、询问框、输入框的使用
开发语言·javascript
JosieBook1 小时前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
Data_Adventure1 小时前
AI让我6天开发完移动端大屏编辑器,卷吗?
前端
MiyueFE1 小时前
Nuxt 4.0 深度解析:从架构革新到实战迁移 🚀
前端·nuxt.js
天天向上的鹿茸1 小时前
web前端用MVP模式搭建项目
前端·javascript·设计模式
wocwin2 小时前
uniapp微信小程序vue3封装时间段范围选择组件
vue.js·微信小程序
暖木生晖2 小时前
动画序列——实现一个div转一圈的效果
前端·css·html·css3·html5
山河木马2 小时前
前端学C++可太简单了:导入标准库
前端·javascript·c++