el-upload 自定义上传显示进度条

要自定义 el-upload 组件的上传显示进度条，可以通过监听 upload-progress 事件来获取上传进度，并在模板中展示进度条。

首先，在 el-upload 组件上添加 upload-progress 事件监听器，并绑定一个处理函数。例如：

<el-upload
  class="upload-demo"
  :action="yourUploadAPI"
  :on-progress="handleUploadProgress"
>
  <!-- ... -->
</el-upload>

然后在 Vue 实例中定义 handleUploadProgress 方法，该方法会在上传过程中被调用，传入一个 progressEvent 对象，其中包含了上传进度信息。在该方法中，你可以根据 progressEvent 的 loaded 和 total 属性计算出进度百分比，并将其保存到 Vue 实例的 data 中。

data() {
  return {
    uploadProgress: 0
  };
},
methods: {
  handleUploadProgress(progressEvent) {
    if (progressEvent.lengthComputable) {
      this.uploadProgress = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
    }
  }
}

最后，在模板中展示进度条，使用 el-progress 组件，绑定进度百分比数据。

<el-progress
  v-if="uploadProgress > 0"
  :percentage="uploadProgress"
  :show-text="false"
></el-progress>

这样就可以实现自定义上传显示进度条了。记得将 yourUploadAPI 替换为你的上传接口地址。