一.实现思路
无他,唯防抖尔
二.html块
<el-upload class="upload-cl" accept=".pdf" action="#" :before-upload="beforeUpload"
:http-request="handleUploadHttp" multiple :file-list="fileList">
<el-button size="small" icon="el-icon-plus" type="primary">文件上传</el-button>
</el-upload>
1. beforeUpload做文件校验
2.handleUploadHttp自定义上传方法
三.逻辑函数
//自定义上传方法
handleUploadHttp(fileData) {
//定义一个全局数组uploadFileList来做存储
this.uploadFileList.push(fileData.file);
this.debounceUpload();
},
//中间层写防抖,防抖可以用lodash的,也可以用自己写的
debounceUpload: _debounce(function () {
this.uploadBatch();
}, 20),
uploadBatch() {
//这里打印出来的数组就是多个文件的数据,且仅会打印一次
console.log('this.uploadFileList',this.uploadFileList);
},
四.附录:防抖函数
// 防抖
/**
* 概念:在事件被触发n秒后再执行回调,在n秒内执行,只会重新计时。
* 举例:当输入框不断输入值的时候,使用防抖节约请求资源
* 场景:
* 1. 输入框搜索联想,只在最终输入结束的时候触发
* 2. window监听resize,调整浏览器窗口大小。
*/
export function _debounce(fn, delay) {
var delay = delay || 500;
var timer;
return function () {
var that = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(that, args);
}, delay);
};
}