使用el-upload手动上传文件显示进度条

要使用 `el-upload` 组件手动上传文件并显示进度条，需要结合以下两个组件：

1. `el-upload` 组件：用于选择文件和触发上传操作。

2. `el-progress` 组件：用于显示上传进度。

下面是一个示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :show-file-list="false"
      :on-progress="handleProgress"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-progress :percentage="uploadPercentage" v-if="uploadPercentage !== 0"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',
      uploadPercentage: 0,
    };
  },
  methods: {
    handleSuccess(response) {
      // 上传成功后的处理逻辑
    },
    handleProgress(event, file, fileList) {
      this.uploadPercentage = parseInt(event.percent);
    },
  },
};
</script>

在上面的代码中，`el-upload` 组件绑定了 `on-progress` 事件，该事件会在上传进度发生变化时触发，并将上传进度作为参数传递给事件处理函数 `handleProgress`。在 `handleProgress` 函数中，我们将上传进度转换成整数并赋值给 `uploadPercentage` 属性，从而实现了进度条的动态显示。

注意：在实际项目中，需要将 `uploadUrl` 替换成真实的上传地址，并在 `handleSuccess` 函数中处理上传成功后的逻辑。