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

要在 Element UI 的文件上传组件中添加进度条，可以使用 `on-progress` 属性来监听上传进度，并使用 `el-progress` 组件来展示进度条。

具体步骤如下：

1. 在模板中添加文件上传组件和进度条组件：

<el-upload
  class="upload-demo"
  action="/upload"
  :on-progress="handleUploadProgress"
>
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button type="success" class="upload-demo-start-btn">上传到服务器</el-button>
</el-upload>

<el-progress :percentage="uploadProgress" :status="uploadStatus"></el-progress>

2. 在 Vue 实例中添加 `handleUploadProgress` 方法来更新上传进度：

data() {
  return {
    uploadProgress: 0,
    uploadStatus: 'info'
  }
},
methods: {
  handleUploadProgress(event, file, fileList) {
    this.uploadProgress = parseInt(event.percent, 10)
    if (this.uploadProgress === 100) {
      this.uploadStatus = 'success'
    } else {
      this.uploadStatus = 'info'
    }
  }
}

在 `handleUploadProgress` 方法中，我们通过 `event.percent` 属性获取上传进度百分比，并将其赋值给 `uploadProgress` 变量。如果上传进度为 100%，则将 `uploadStatus` 变量设置为 `success`，否则为 `info`。

这样，当用户上传文件时，进度条就会动态显示上传进度。