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

}

相关推荐
汤面不加鱼丸几秒前
flutter实践:比例对比线图实现
前端·flutter
Jenlybein3 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ 面向对象篇 ]
前端·javascript·面试
专业掘金5 分钟前
0429 手打基础丸
前端
还有发量的前端程序员6 分钟前
Vue3初始化完整过程和原理
前端
Jenlybein6 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ Generator 篇 ]
前端·javascript·面试
绅士玖9 分钟前
Vue.js 小知识点大揭秘:提升开发效率的实用技巧
前端·vue.js
彭不懂赶紧问9 分钟前
鸿蒙NEXT开发浅进阶到精通04:类似支付宝横向导航栏与list组件联动随航
前端·harmonyos
Jenlybein9 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ Promise 与 async 篇 ]
前端·javascript·面试
全栈老李11 分钟前
【高频考点精讲】JavaScript中的访问者模式:从AST解析到数据转换的艺术
javascript
用户20311966009611 分钟前
SwiftUI 中的 scaleEffect 修饰器
前端