element-ui Upload 上传组件源码分析整理笔记（十四）

在上一篇笔记中，我们分析了 `upload` 组件内部的 `request` 方法，接下来我们继续分析 `upload` 组件的另一个核心方法——`handleChange`。

## handleChange

`handleChange` 方法是 `upload` 组件内部监听 `change` 事件的回调函数。当用户选择文件后，该方法会被调用。

handleChange(ev) {
  const { target } = ev;
  const { fileList } = this;

  // 根据上传文件的状态，更新 fileList 中对应文件的状态
  const files = toArray(target.files);
  this.uploadFiles(files);
  target.value = '';
},

首先，我们通过事件对象获取到当前用户选择的文件列表。接下来，调用了 `uploadFiles` 方法，将选择的文件列表作为参数传入，用于处理文件上传操作。

最后，我们将 input 元素的值重置为空，以便用户下一次可以选择同一个文件进行上传。

## uploadFiles

`uploadFiles` 方法是 `handleChange` 方法的内部方法，用于处理上传文件的具体操作。

uploadFiles(files) {
  const postFiles = Array.prototype.slice.call(files);
  const remainCount = this.limit - this.fileList.length;
  const canPostFiles = postFiles.slice(0, remainCount);

  canPostFiles.forEach(file => {
    this.upload(file);
  });
},

首先，将选择的文件列表转换成数组 `postFiles`。接着，我们计算出还可以上传的文件数量，并从 `postFiles` 数组中截取出可上传文件的子数组 `canPostFiles`。

最后，我们遍历 `canPostFiles` 数组，分别调用 `upload` 方法上传每个文件。

## upload

`upload` 方法是 `uploadFiles` 方法的内部方法，用于处理单个文件的上传操作。

upload(rawFile, file) {
  const { onPreview } = this.$listeners;
  if (!this.beforeUpload) {
    return this.post(rawFile);
  }

  const before = this.beforeUpload(rawFile);
  if (before && before.then) {
    before.then(processedFile => {
      if (Object.prototype.toString.call(processedFile) === '[object File]') {
        this.post(processedFile);
      } else {
        this.post(rawFile);
      }
    }, () => {
      this.abort(rawFile, file);
    });
  } else if (before !== false) {
    this.post(before);
  } else {
    this.abort(rawFile, file);
  }
  if (onPreview) onPreview(file || rawFile);
},

首先，我们判断是否存在 `beforeUpload` 属性。如果不存在，直接调用 `post` 方法上传文件。

如果存在 `beforeUpload` 属性，调用 `beforeUpload` 方法并传入当前待上传的文件 `rawFile` 作为参数。如果 `beforeUpload` 返回一个 Promise 对象，我们需要等待 Promise 的 resolve 后再进行具体的上传操作。

如果 `beforeUpload` 返回一个 `File` 对象，说明已经对待上传的文件进行了加工处理，我们需要使用修改后的文件进行上传操作。否则，我们使用原始的 `rawFile` 进行上传。

如果 `beforeUpload` 返回 false，说明不允许上传当前的文件，我们需要调用 `abort` 方法中止上传操作。

最后，我们触发 `onPreview` 事件，用于预览文件。

到这里，我们已经分析了 `upload` 组件内部的两个核心方法 `handleChange` 和 `uploadFiles`，以及 `upload` 方法的具体实现。在下一篇笔记中，我们将继续分析 `upload` 组件的其他方法。