el-upload 自定义上传进度

对于 `el-upload` 组件的自定义上传进度，你可以通过监听 `change` 事件来获取上传的文件对象，并使用自定义的方法来获取上传进度。

首先，在 `el-upload` 上添加 `@change` 事件的监听器，例如：

<el-upload
  class="upload-demo"
  action="/your-upload-url"
  :on-change="handleChange"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

然后，在 Vue 实例中定义 `handleChange` 方法来处理文件的上传进度，例如：

export default {
  methods: {
    handleChange(file, fileList) {
      // 使用自定义的方法获取上传进度
      this.getUploadProgress(file);
    },
    getUploadProgress(file) {
      // 自定义获取上传进度的方法
      const xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", (event) => {
        if (event.lengthComputable) {
          const progress = Math.floor((event.loaded / event.total) * 100);
          console.log(`Upload progress: ${progress}%`);
          // 在这里更新上传进度的显示或执行其他操作
        }
      });
      xhr.upload.addEventListener("load", (event) => {
        console.log("Upload complete");
        // 在这里执行上传完成后的操作
      });
      // 发送请求
      xhr.open("POST", "/your-upload-url");
      xhr.setRequestHeader("Content-Type", "multipart/form-data");
      xhr.send(file);
    }
  }
}

上述代码中，`getUploadProgress` 方法使用 `XMLHttpRequest` 对象来发送文件上传请求，并通过监听 `progress` 事件获取上传进度，然后在事件处理函数中更新上传进度的显示或执行其他操作。

请根据你的实际需求修改代码，并将 `/your-upload-url` 替换为你的上传接口地址。