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

在 Element UI 中，你可以使用 `<el-upload>` 组件来实现文件上传功能。为了添加进度条，你需要使用 `:on-progress` 属性来监听上传进度。

例如：

<template>
  <el-upload
    class="upload-demo"
    action="//jsonplaceholder.typicode.com/posts/"
    :on-progress="handleProgress"
    :show-file-list="false"
    :http-request="customRequest"
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleProgress(event, file, fileList) {
      console.log(event, file, fileList);
      // 在这里更新进度条的值
    },
    customRequest(options) {
      console.log(options);
      // 在这里发送自定义的上传请求
    }
  }
}
</script>

在这个例子中，我们使用了 `:on-progress="handleProgress"` 来监听上传进度。`handleProgress` 方法会在每次上传进度有更新时被调用。

你可以通过 `event.percent` 属性来获取当前上传进度的百分比，并在这里更新进度条的值。具体的进度条实现方式可以参考 Element UI 官方文档。

另外，我们还使用了 `:http-request="customRequest"` 来自定义上传请求。你可以在 `customRequest` 方法中使用自己的上传方法，如使用 Axios 发送请求，或者使用原生的 XMLHttpRequest 发送请求，等等。