el-upload进度条

el-upload组件是饿了么团队开发的一个文件上传组件，它提供了一个进度条来显示文件上传的进度。你可以使用以下步骤来实现el-upload进度条：

1. 首先，确保你已经安装并引入了element-ui库。可以在你的项目中添加以下代码来引入el-upload组件：

import { Upload } from 'element-ui';
import 'element-ui/lib/theme-chalk/upload.css';

Vue.use(Upload);

2. 在你的Vue组件中使用el-upload组件，并绑定一个数据属性来保存上传文件的进度值：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your/upload/api"
      :on-progress="handleProgress"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-progress v-if="fileProgress" :percentage="fileProgress" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileProgress: 0, // 保存上传文件的进度值
    };
  },
  methods: {
    handleProgress(event, file, fileList) {
      // 计算上传文件的进度值
      this.fileProgress = (event.loaded / event.total) * 100;
    },
  },
};
</script>

<style scoped>
.upload-demo {
  margin-bottom: 20px;
}
</style>

在上述代码中，我们通过`:on-progress`绑定了一个事件处理函数`handleProgress`，该函数会在文件上传过程中被调用，并通过计算文件的进度值来更新`fileProgress`属性。然后，我们使用`el-progress`组件来展示上传进度条，只有在`fileProgress`有值时才会显示。

3. 最后，你需要根据你的实际需求，自定义样式和处理上传逻辑。

希望以上步骤对你有所帮助！如有任何问题，请随时提问。