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

}

相关推荐
祝余呀3 分钟前
html初学者第一天
前端·html
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络2 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way3 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github