极简| 教您用El-Upload上传控件创建自定义上传进度条

最近有一个任务，需要写一个上传页面，因为是后台页面，所以首先考虑使用Element UI中的<el-upload>组件。由于项目需要分片上传，所以我需要对上传进度条进行一些定制。

初始尝试

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="handleChange"
  :on-progress="handleProgress"
>
  <el-button type="primary">点击上传</el-button>
</el-upload>

import { ref } from 'vue'

export default {
  setup() {
    const progress = ref(0)

    const handleProgress = (event) => {
      progress.value = Math.round(event.percent)
    }

    const handleChange = (file) => {
      console.log(file)
    }

    return {
      progress,
      handleProgress,
      handleChange,
    }
  },
}

如上所示，这是我第一次尝试使用<el-upload>组件。我在组件上添加了@on-progress监听器，以便在上传过程中跟踪进度。我还添加了一个progress变量，用于在模板中显示进度。

但是，当我运行这个代码时，我注意到进度条没有显示。经过一番调查，我发现<el-upload>组件默认不显示进度条。为了显示进度条，我需要添加show-file-list属性。

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="handleChange"
  :on-progress="handleProgress"
  show-file-list
>
  <el-button type="primary">点击上传</el-button>
</el-upload>

添加了show-file-list属性后，进度条就显示出来了。但是，我发现进度条的样式不是我想要的。它太大了，而且颜色也不合适。

自定义进度条样式

为了自定义进度条的样式，我需要使用<el-upload>组件的progress-template属性。这个属性允许我指定一个自定义的模板来渲染进度条。

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="handleChange"
  :on-progress="handleProgress"
  show-file-list
  :progress-template="{percentage: '进度条'}"
>
  <el-button type="primary">点击上传</el-button>
</el-upload>

如上所示，我将<el-upload>组件的progress-template属性设置为{percentage: '进度条'}。这将把进度条的文本内容替换为“进度条”。

我还可以使用CSS来进一步自定义进度条的样式。

.el-upload-progress {
  background-color: #ccc;
  height: 5px;
}

.el-upload-progress__inner {
  background-color: #409eff;
  height: 100%;
}

这将把进度条的背景颜色设置为灰色，并将进度条的填充颜色设置为蓝色。

总结

通过使用<el-upload>组件的progress-template属性和CSS，我能够自定义上传进度条的样式，使其符合我的项目需求。希望这篇文章对您有所帮助。