elementui上传进度条

Element UI 提供了一个名为 `el-upload` 的组件，可以用来实现文件上传功能，并且可以显示上传进度条。下面是一个简单的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="//jsonplaceholder.typicode.com/posts/"
      :on-progress="handleUploadProgress"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :http-request="customHttpRequest"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadProgress: 0,
      showProgress: false
    };
  },
  methods: {
    handleUploadProgress(event, file, fileList) {
      this.uploadProgress = event.percent;
    },
    handleUploadSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
    },
    handleUploadError(error, file, fileList) {
      // 处理上传失败的逻辑
    },
    customHttpRequest(options) {
      // 自定义上传请求逻辑，可以使用 axios 或其他库发送请求
      // 在请求中可以通过 options.onProgress 来获取上传进度并更新到 this.uploadProgress
    }
  }
};
</script>

在上述示例代码中，通过 `el-upload` 组件实现了文件上传功能。`action` 属性指定了上传文件的地址，`on-progress` 事件监听上传进度，`on-success` 事件监听上传成功，`on-error` 事件监听上传失败。`http-request` 属性可以自定义上传请求逻辑，其中可以通过 `options.onProgress` 获取上传进度并更新到 `this.uploadProgress`。最后，通过 `el-progress` 组件来显示上传进度条，通过控制 `showProgress` 属性来控制进度条的显示与隐藏。