IT博客汇 | 知道事件捕获!

知道事件捕获!

熊的猫发表于 2022-11-23 10:49:57

前言

【同事 A】：你知道 Element UI 的 Upload 组件怎么实现 批量拖拽上传 吗？现有的二次封装的 Upload 组件只能做到 批量点击上传 。

【我】：Show me your code ！！！

【同事 A】：代码地址是 https://git.i-have-no-idea.com/what-the-hell

【我】：就冲这个地址，就算是天天 CRUD 的我，也高低给你整一篇水文 ~~

同事 A 接到的大致需求是这样的：

当用户同时选择单个文件时，该文件会经过识别后需要生成一个对应 待填写的信息项，并将识别的内容进行自动填充和供用户手动编辑
当用户同时选择多个文件时，这多个文件会被作为同一个 待填写的信息项 的内容进行显示

接口设计 的内容大致如下：

前端每调用一次该识别接口，就会返回一个新的 待填写的信息项 数据，其中会包含本次上传的 单个或多个 文件信息
意味着生成 待填写的信息项 应该只调用一次上传接口，多次调用则会得到多个 待填写的信息项

下面就基于 Element UI 的 Upload 组件进行二次封装，一边封装一边复现上述问题，然后在解决问题，主要内容包含 批量点击上传 和 批量拖拽上传 两种方式。

自定义上传方式

该项目涉及核心技术为：vue@2.6.10 + vue-property-decorator@8.3.0 + element-ui@2.15.1，下面省略创建测试项目的过程 ~ ~

默认上传方式

熟悉 Element UI 的都知道 Upload 组件默认的上传方式是为每一个单独的文件发送单独的请求，大致如下：

这显然和上述的需求不一致，因此自定义上传方式是必然的。

自定义上传

Upload 组件提供给了对应的 auto-upload 选项便于使用者能够自定义上传时机，同时为了能够更好的控制上传逻辑，还得使用 http-request 选项来覆盖其默认的上传行为，这样便于我们自定义上传的实现。

当然除这些之外，在 vue 中一般基于二次封装的组件，可以直接通过 $attrs 的方式来接收外部传入的在 父组件 中不作为 prop 被识别的 attribute 绑定，除了 class 和 style 之外，也就是直接使用 属性继承。

于是就得到了一个最基本的二次封装后 <EasyUpload /> 组件的大致内容：

<template>
  <div class="easy-upload">
    <el-upload :ref="refName" :name="aliasName" v-bind="$attrs" :auto-upload="false" :http-request="httpRequest" :on-change="onChange">
      <slot></slot>
    </el-upload>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { post } from '@utils/request';
import ElementUI from 'element-ui';

// 定义一个自增的 id ，避免在同一个组件中多次使用 EasyUpload 造成 ref 和 name 重复
let _uploadId_ = 0;

@Component({})
export default class EasyUpload extends Vue {
  refName = '_upload_ref_';
  aliasName = '_upload_name_';

  created() {
    this.initConfig();
  }

  // 初始化组件数据
  initConfig() {
    if (this.$attrs.name) this.aliasName = this.$attrs.name;

    // 保证 refName 和 <input> 的 name 属性值在父组件中唯一
    this.refName += _uploadId_;
    this.aliasName += _uploadId_;
    _uploadId_++;
  }

  formatParams(file) {
    const formData = new FormData();

    // 文件相关参数
    formData.append(this.$attrs.name || 'file', file);

    // 额外参数
    const { data } = this.$attrs;
    if (data) {
      Object.keys(data).forEach((key) => {
        formData.append(key, data[key]);
      });
    }

    return formData;
  }

  async httpRequest(options: any) {
    const formData = this.formatParams(options.file);
    const res = await post(this.$attrs.action, formData, true);
    // do something
    (this.$refs[this.refName] as ElementUI.Upload).clearFiles();
  }

  onChange(file, fileList) {
    // 触发上传逻辑
    (this.$refs[this.refName] as ElementUI.Upload).submit();
  }
}
</script>

<style scoped lang="less">
@import './index.less';
</style>

批量点击上传

显然，以上的实现根本满足不了 批量点击上传，因为我们在 onChange 直接调用了 submit 来实现和直接使用 el-upload 差不多的上传方式，既然如此我们只要在 onChange 只调用一次 submit 方法即可，判断方法很简单：

首先要获取用户当前一共选中了多少文件数量，即 总数量
每次触发 onChange 时，把当前的 file 对象保存到 uploadedFiles 中，直到 uploadedFiles 中的文件数量和总数量一致时，在手动触发 submit 方法

怎么获取当前用户获取文件的总数量？

别着急，咱们先审查元素看看 el-upload 到底渲染的是个啥？相信你大概率已经猜到了，其实就是 type="file" 的 <input /> 元素，它本身也支持多选（即设置multiple="multiple"），具体如下：

更重要的是 input 元素的 onchange 中可以获取到对应的文件列表对象 files，即通过 event.target.files 来获取，而这就是用户选择文件的总数量

通过 onChange 控制 submit

经过改写的 onChange 如下所示，没有什么太大的难点，直接上代码：

为什么不用 onChange 中的 fileList 参数呢？因为多选的情况下每次 onChange 被执行，其中的 fileList 就只会增加一条数据，而不是所有的数据，因此没办法根据其值来进行判断.

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { post } from '@utils/request';
import ElementUI from 'element-ui';

// 定义一个自增的 id ，避免在同一个组件中多次使用 EasyUpload 造成 ref 和 name 重复
let _uploadId_ = 0;

@Component({})
export default class EasyUpload extends Vue {
  inputFiles: File[] = [];
  uploadedFiles: File[] = [];
  ...

  created() {
    this.initConfig();
  }

  // 初始化组件数据
  initConfig() {
   ...
  }

  formatParams(file) {
    ....
  }

  async httpRequest(options: any) {
    const formData = this.formatParams(options.file);
    const res = await post(this.$attrs.action, formData, true);
    // do something
    (this.$refs[this.refName] as ElementUI.Upload).clearFiles();
  }

  onChange(file, fileList) {
    // 将当前文件保存到 uploadedFiles 中
    if (file.status == 'ready') {
      this.uploadedFiles.push(file.raw);
    }

    // 只赋值一次，因为 input 元素上的 files 就是本次用户选中的所有文件
    if (this.inputFiles.length === 0) {
      this.inputFiles = Array.from((<HTMLInputElement>document.getElementsByName(this.aliasName)[0]).files || []);
    }

    console.log(' ================ onChange trigger ================ ');
    console.log('inputFiles.length = ', this.inputFiles.length, 'uploadedFiles.length = ', this.uploadedFiles.length);

    // 触发上传逻辑
    if (this.inputFiles.length === this.uploadedFiles.length) {
      (this.$refs[this.refName] as ElementUI.Upload).submit();
    }
  }
}
</script>

来测试一下看看效果吧！

可以看到 onChange 事件中的判断没有问题，既获取到了总文件数量，也保存了当前的文件，最终的判断条件也是没问题的，但是为什么还是调用了多次的接口呢？

这个不扯别的，直接上源码，因为内容太简单了，文件路径：element-ui\packages\upload\src\upload.vue

原因超级简单，上面我们控制的是 submit 的执行次数，但是源码中是直接从已上传的文件列表中通过遍历的方式来依次调用 upload 方法，其中是否调用上传方法是根据 beforeUpload 的返回值来决定的（关于这一点在文档中也有说明）：

通过 beforeUpload 控制上传

beforeUpload 是上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject 会停止上传，于是可以有如下的实现：

<template>
  <div class="easy-upload">
    <el-upload :ref="refName" :name="aliasName" v-bind="$attrs" :auto-upload="false" :before-upload="beforeUpload" :http-request="httpRequest" :on-change="onChange">
      <slot></slot>
    </el-upload>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { post } from '@utils/request';
import ElementUI from 'element-ui';
import { lang } from 'moment';

let _uploadId_ = 0;

@Component({})
export default class EasyUpload extends Vue {
  uploadedFiles: File[] = [];
  inputFiles: File[] = [];
  refName = '_upload_ref_';
  aliasName = '_upload_name_';

  created() {
    this.initConfig();
  }

  // 初始化组件数据
  initConfig() {
    if (this.$attrs.name) this.aliasName = this.$attrs.name;

    this.refName += _uploadId_;
    this.aliasName += _uploadId_;
    _uploadId_++;
  }

  formatParams() {
    const formData = new FormData();

    // 文件相关参数
    this.uploadedFiles.forEach((file) => {
      formData.append(this.$attrs.name || 'file', file);
    });

    // 额外参数
    const { data } = this.$attrs;
    if (data) {
      Object.keys(data).forEach((key) => {
        formData.append(key, data[key]);
      });
    }

    return formData;
  }

  async httpRequest(options: any) {
    const formData = this.formatParams();
    const res = await post(this.$attrs.action, formData, true);
    (this.$refs[this.refName] as ElementUI.Upload).clearFiles();
  }

  beforeUpload() {
    // 是否需要调用上传接口
    return this.uploadedFiles.length === this.inputFiles.length;
  }

  onChange(file, fileList) {
    if (file.status === 'ready') {
      this.uploadedFiles.push(file.raw);
    }

    // 只赋值一次，因为 input 元素上的 files 就是本次用户选中的所有文件
    if (this.inputFiles.length === 0) {
      this.inputFiles = Array.from((<HTMLInputElement>document.getElementsByName(this.aliasName)[0]).files || []);
    }

    (this.$refs[this.refName] as ElementUI.Upload).submit();
  }
}
</script>

大致效果如下：

批量拖拽上传

上面的方式能不能支持 批量拖拽上传 呢，直接来试试看：

上述我们选择了 3 个文件，也触发了 3 次 beforeUpload，但在其中的 this.inputFiles 的长度却一直是 0，而 this.uploadedFiles 的长度在变化，导致最终的判断条件出现了问题。

从源码查找原因

源码位置：element-ui\packages\upload\src\upload.vue

当 props.drag 为 true 时，会渲染 <upload-dragger> 组件
当 props.drag 为 false 时，会渲染外部指定的 默认插槽的内容

再去看看 <upload-dragger> 组件 的具体内容，大致如下：

显然，当用户通过拖拽的方式实现上传时，是通过 HTML5 中的拖放事件来实现的，那么选择的文件自然不能通过 input.files 的方式获取到，这也就是文章开头提到的问题。

事件捕获 — 事件捕获都知道，那你倒是用起来啊！

通过查看源码之后发现拖拽时一定会触发 onDrop，那么既然不能通过 input.files 的方式获取用户选中文件的总数量，那么我们就在父级的 onDrop 事件中再去获取用户选择的文件内容（可通过 event.dataTransfer.files 获取），即利用事件捕获的方式

DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据，它可以保存一项或多项数据，这些数据项可以是 一种或多种 数据类型

<template>
  <div class="easy-upload" @drop.capture="onDrop">
    <el-upload :ref="refName" :name="aliasName" v-bind="$attrs" :auto-upload="false" :before-upload="beforeUpload" :http-request="httpRequest" :on-change="onChange">
      <slot></slot>
    </el-upload>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { post } from '@utils/request';
import ElementUI from 'element-ui';

let _uploadId_ = 0;

@Component({})
export default class EasyUpload extends Vue {
  uploadedFiles: File[] = [];
  inputFiles: File[] = [];
  refName = '_upload_ref_';
  aliasName = '_upload_name_';

  created() {
    this.initConfig();
  }

  // 初始化组件数据
  initConfig() {
    if (this.$attrs.name) this.aliasName = this.$attrs.name;

    this.refName += _uploadId_;
    this.aliasName += _uploadId_;
    _uploadId_++;
  }

  formatParams() {
    const formData = new FormData();

    // 文件相关参数
    this.uploadedFiles.forEach((file) => {
      formData.append(this.$attrs.name || 'file', file);
    });

    // 额外参数
    const { data } = this.$attrs;
    if (data) {
      Object.keys(data).forEach((key) => {
        formData.append(key, data[key]);
      });
    }

    return formData;
  }

  async httpRequest(options: any) {
    const formData = this.formatParams();
    const res = await post(this.$attrs.action, formData, true);
    // 重置操作
    this.resetUpload();
  }

  beforeUpload() {
    // 是否需要调用上传接口
    return this.uploadedFiles.length === this.inputFiles.length;
  }

  onChange(file, fileList) {
    if (file.status === 'ready') {
      this.uploadedFiles.push(file.raw);
    }

    // 由于开启了事件捕获，因此 ondrop 只要被触发，this.inputFiles 就会有值
    // 如果 this.inputFiles 没有值，证明当前是点击上传的方式
    if (this.inputFiles.length === 0) {
      this.inputFiles = Array.from((<HTMLInputElement>document.getElementsByName(this.aliasName)[0]).files || []);
    }

    (this.$refs[this.refName] as ElementUI.Upload).submit();
  }

  onDrop(event) {
    // 事件捕获提前执行，为 inputFiles 赋值
    this.inputFiles = Array.from(event.dataTransfer.files);
  }

  resetUpload() {
    this.uploadedFiles = [];
    this.inputFiles = [];
    (this.$refs[this.refName] as ElementUI.Upload).clearFiles();
  }
}
</script>

效果演示

批量点击上传 和 批量拖拽上传 效果如下：

事情的后续

`同事 A` 的另一种解决方案

【同事 A】 看完这篇文章不仅没有 点赞 + 收藏，反而说他实现找到了一种更合适的方式，邀我一同欣赏他的操作，大致思路非常简单：

由于 Upload 组件的 onChange 事件会被多次执行（即用户选择多少个文件，就会执行多少次），并且 onChange(file, fileList) 的参数 fileList 只有最后一次执行时才会拿到用户选择文件的总数
因此 【同事 A】 就在 onChange 事件中使用了 $nextTick 包裹整个 onChange 的内容，大致如下：
```
onChange(file, fileList) {
    this.$nextTick(() => {
      file.status == 'ready' && this.uploadFiles.push(file.raw);
      let files: any = (<HTMLInputElement>document.getElementsByName(this.name)[0]).files;
      this.fileTotal = this.drag ? fileList.length : files.length;
      if (this.uploadFiles.length === this.fileTotal) {
        (this.$refs[this.refName] as any).submit();
      }
    });
}
```
@【同事 A】 等我分析完，总该给我【点赞 + 收藏】了吧！！！
合理分析
为什么可用？
显然，使用了 $nextTick 之后 onChange(file, fileList) 的参数 fileList 就一定是用户选择的文件总数，因为 $nextTick 包裹的内容是一个 微/宏任务，这意味着这段逻辑不会立马执行，而等到它执行时，由于 fileList 参数是对应源码中的 this.uploadFiles，即等到 $nextTick 的回调函数被执行时，对应的 this.uploadFiles 已经是包含了用户选择的所有文件，因此 this.uploadFiles.length === this.fileTotal 这个判断是可以的。

源码位置：element-ui\packages\upload\src\index.vue：

handleStart(rawFile) {
  rawFile.uid = Date.now() + this.tempIndex++;
  let file = {
    status: 'ready',
    name: rawFile.name,
    size: rawFile.size,
    percentage: 0,
    uid: rawFile.uid,
    raw: rawFile
  };

  if (this.listType === 'picture-card' || this.listType === 'picture') {
    try {
      file.url = URL.createObjectURL(rawFile);
    } catch (err) {
      console.error('[Element Error][Upload]', err);
      return;
    }
  }

  this.uploadFiles.push(file);
  this.onChange(file, this.uploadFiles);
},

能用就真的合适用吗？

虽然说上述方式确实能够实现对应的需求，但却并不一定合适：

由于 onChange 事件会被多次执行，导致 $nextTick 被多次执行，意味着 微/宏任务队列 中会出现多个没有必要被执行的任务
- 比如用户选择文件总数为 4 ，onChange 执行 4 次，$nextTick 执行 4 次，微/宏任务队列 中会被添加 4 个任务，而这些任务都已经能够访问最终的 fileList 总数，没有必要被多次推入任务队列中
相比来说，只需要执行一次即可 ``，比如：
```
  hasChange = false;
  onChange(file, fileList) {
    // hasChange 的加持下，$nextTick 只会执行一次
    !this.hasChange &&
      this.$nextTick(() => {
        // 可以拿到用户选择的全部文件列表
        this.uploadFiles = fileList;
        (this.$refs[this.refName] as any).submit();
      });
    
    this.hasChange = true;
  }
```
扩展思路
有了上面的思路，仍然可以进行扩展，只要在 onChange 的最后一次执行时，保存 fileList 和进行 submit 提交，就可以实现最终的目的，比如用【防抖】来实现 onChange，这样多次触发 onChange 时，也只有最后一次会执行，并且最后一次已经可以拿到我们需要的所有数据。

最后

上述功能需求还是比较简单的，从源码角度来理解也并不困难，经过上述的剖析相信你对自己实现所谓的 点击上传 和 拖拽上传 应该也有自己的理解，完全可以自己去实现一个，并提供给它们对应的 批量上传 方式。

希望本文对你所有帮助！！！@【同事 A】