element-ui文件上传添加进度条

可以使用 Element UI 中的 Upload 组件来实现文件上传并添加进度条。具体做法如下：

1. 在需要上传文件的组件中引入 Upload 组件，并添加一个 data 属性用于存储上传进度：

<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      :action="uploadUrl"
      :on-progress="handleProgress"
      :show-file-list="false"
      :http-request="uploadFile"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-progress :percentage="uploadProgress" :status="uploadStatus"></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your_upload_url',
      uploadProgress: 0,
      uploadStatus: 'success'
    }
  },
  methods: {
    handleProgress(event, file, fileList) {
      if (event.lengthComputable) {
        this.uploadProgress = Math.round(event.loaded / event.total * 100)
      }
    },
    uploadFile(file) {
      // upload file here
    }
  }
}
</script>

2. 在 handleProgress 方法中，根据事件对象计算上传进度，并将其保存在 data 中的 uploadProgress 属性中。

3. 在 uploadFile 方法中，通过调用上传接口上传文件，并在上传成功或失败后更新 uploadStatus 属性，以便控制进度条的颜色。

这样，当用户选择文件后，文件将自动上传，同时进度条会显示上传进度。如果上传失败，进度条将变为红色。如果上传成功，进度条将变为绿色。