el-upload上传进度条

el-upload 是饿了么的 Vue.js 组件库中的上传组件，它提供了上传文件的功能。要显示上传进度条，需要使用 el-upload 组件的 :on-progress 属性来监听上传进度事件。具体步骤如下：

1. 在 el-upload 标签上添加 :on-progress="handleProgress" 属性，将上传进度事件绑定到 handleProgress 方法上。
2. 在 Vue 实例中定义 handleProgress 方法，该方法接收一个 progressEvent 对象，其中包含了上传进度信息。通过该对象可以获取上传进度百分比，然后将其存储到 data 中。
3. 在 el-upload 组件内部添加一个 el-progress 组件，将进度条的百分比绑定到 data 中存储的值上。

示例代码如下：

<template>
  <el-upload
    :action="uploadUrl"
    :on-progress="handleProgress"
    :show-file-list="false"
  >
    <el-button type="primary">上传文件</el-button>
  </el-upload>
  <el-progress :percentage="uploadPercent" />
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your_upload_url',
      uploadPercent: 0,
    }
  },
  methods: {
    handleProgress(event) {
      if (event.lengthComputable) {
        this.uploadPercent = Math.round((event.loaded / event.total) * 100)
      }
    },
  },
}
</script>

在上面的示例代码中，我们定义了一个 el-upload 组件，并将上传进度事件绑定到 handleProgress 方法上。在 handleProgress 方法中，我们通过计算上传进度百分比，并将其存储到 data 中。最后，我们在 el-upload 组件内部添加了一个 el-progress 组件，将进度条的百分比绑定到 data 中存储的值上，就可以显示上传进度条了。