el-upload 自定义进度条

对于 `el-upload` 组件的自定义进度条，你可以使用 `slot` 来实现。具体步骤如下：

1. 在 `el-upload` 组件中添加一个自定义的插槽，例如：

<el-upload :action="uploadUrl" :on-progress="handleProgress">
  <template #progress>
    <!-- 自定义进度条 -->
  </template>
</el-upload>

2. 在 `handleProgress` 方法中获取上传进度，并将其传递给自定义插槽，例如：

methods: {
  handleProgress(event, file, fileList) {
    // 计算上传进度
    const percentage = Math.round(event.percent || 0);

    // 将进度传递给自定义插槽
    this.$refs.progress.innerHTML = `${percentage}%`;
  }
}

3. 在自定义插槽中实现自定义的进度条样式，例如：

<template #progress>
  <div class="custom-progress">
    <div class="progress-bar" ref="progress"></div>
  </div>
</template>

<style scoped>
.custom-progress {
  width: 100%;
  height: 10px;
  background-color: #f5f5f5;
}

.progress-bar {
  height: 100%;
  background-color: #409eff;
}
</style>

上述代码中，我们使用了一个 `custom-progress` 的容器来包裹进度条，使用 `progress-bar` 类来定义实际的进度条样式。进度条的宽度会根据上传进度的百分比来动态改变。

希望能帮到你！如果有任何疑问，请随时追问。