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

要在 Element-UI 的文件上传组件中添加进度条，可以使用 `on-progress` 事件。该事件在文件上传时会被触发，可以获取上传进度信息。然后，可以在进度条组件中使用这些信息来更新进度条的值。

以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      percentage: 0,
    };
  },
  methods: {
    beforeUpload(file) {
      // 在此处可以添加一些上传前的验证逻辑
      return true;
    },
    handleProgress(event, file, fileList) {
      if (event.type === 'progress') {
        // 计算上传进度
        const progress = parseInt(event.percent, 10);
        // 更新进度条的值
        this.percentage = progress;
      }
    },
  },
};
</script>

在上面的示例中，使用了 Element-UI 的 `el-upload` 和 `el-progress` 组件。在 `el-upload` 组件中，添加了 `on-progress` 和 `before-upload` 属性。其中，`on-progress` 属性指定了上传进度发生变化时的回调函数，`before-upload` 属性指定了上传文件前的回调函数。

在 `handleProgress` 方法中，根据事件类型来判断上传进度发生变化时的事件，然后计算上传进度并更新进度条的值。

这样就可以在 Element-UI 的文件上传组件中添加进度条了。