element-ui 上传组件 自定义上传进度条

Element UI 的 Upload 组件提供了一个名为 `upload-file` 的自定义事件，可以在文件上传过程中通过监听这个事件来自定义上传进度的显示。你可以创建一个自定义的进度条插件或者直接在事件处理器中更新进度状态。

首先，你需要在模板中引用 Upload 组件，并设置其 `action`、`on-progress` 和 `file-list` 属性：

<el-upload
  :action="yourUploadUrl"
  :on-progress="handleProgress"
  :file-list="fileList"
>
  <el-button type="primary">选择文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
</el-upload>

然后，在 Vue 实例中定义 `handleProgress` 方法，例如：

data() {
  return {
    fileList: [],
    progressPercentage: 0,
  };
},
methods: {
  handleProgress(file, percent) {
    // 更新进度百分比
    this.progressPercentage = percent;
    
    // 在这里可以创建一个自定义的进度条并显示百分比
    // 如果是纯前端计算，可以用 CSS 或者 HTML 来实现动态样式
    // 比如，如果用 HTML 创建：
    const progressBar = document.getElementById('progress-bar');
    progressBar.style.width = `${percent}%`;
  }
}

为了实时更新进度，你也可以将 `progressPercentage` 映射到 Vue 的响应式数据，这样每次上传进度变化都会自动触发视图的更新。