el-upload 进度条样式

el-upload 组件的进度条样式可以通过 `progress-slot` 插槽来自定义。代码示例如下：

<template>
  <el-upload
    action="/upload"
    :on-progress="onUploadProgress"
    :headers="{ 'Authorization': 'Bearer ' + token }"
    :show-file-list="false"
  >
    <template #progress="{ file, progress }">
      <div class="progress-wrapper">
        <el-progress
          type="line"
          :percentage="progress"
          :stroke-width="5"
          :color="getProgressColor(progress)"
          :text-inside="true"
          :text-style="{ color: '#fff' }"
        />
      </div>
    </template>
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      token: 'your_token',
    };
  },
  methods: {
    onUploadProgress(event, file, fileList) {
      console.log('Upload progress:', event, file, fileList);
    },
    getProgressColor(progress) {
      if (progress < 50) {
        return 'red';
      } else if (progress < 80) {
        return 'orange';
      } else {
        return 'green';
      }
    },
  },
};
</script>

<style scoped>
.progress-wrapper {
  width: 100%;
}
</style>

在上面的代码中，我们使用了 `progress-slot` 插槽来自定义进度条样式。在插槽中，我们使用了 Element UI 的 `el-progress` 组件来展示进度条，并根据进度值来动态设置进度条的颜色。最后，我们使用了 CSS 来设置进度条容器的宽度为 100%。