el-upload接口一次上传多张图片

最新推荐文章于 2024-07-23 15:11:30 发布

原创最新推荐文章于 2024-07-23 15:11:30 发布 · 993 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

文章介绍了如何利用防抖(debounce)技术优化文件上传功能。在Vue组件中，通过在`beforeUpload`做文件校验，然后自定义`handleUploadHttp`上传方法，结合防抖函数限制上传频率，确保在用户停止选择文件后一段时间内一次性处理所有文件的上传，从而提高性能和用户体验。

一.实现思路

无他，唯防抖尔

二.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);
  };
}