如何通过vue和Element-plus实现文件上传和下载的进度显示

npm install element-plus --save

import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'createApp(App).use(ElementPlus).mount('#app')

<template>  <div>    <div>      <el-upload        class="upload-demo"        action="/api/upload"        :on-progress="handleUploadProgress"        :on-success="handleUploadSuccess"        :before-remove="beforeRemove"      >        <el-button size="small" type="primary">点击上传</el-button>      </el-upload>      <el-progress :percentage="uploadProgress" />    </div>    <div>      <el-button size="small" type="primary" @click="handleDownload">下载文件</el-button>      <el-progress :percentage="downloadProgress" />    </div>  </div></template><script>export default {  data() {    return {      uploadProgress: 0,      downloadProgress: 0    }  },  methods: {    handleUploadProgress(event, file, fileList) {      this.uploadProgress = event.percent    },    handleUploadSuccess(response, file, fileList) {      // 上传成功后的处理逻辑    },    handleDownload() {      // 下载文件的逻辑    },    downloadProgress() {      // 更新下载进度    }  }}</script>

handleDownload() {  const downloadUrl = '/api/download'  window.open(downloadUrl, '_blank')  setInterval(this.updateDownloadProgress, 1000)},updateDownloadProgress() {  // 获取下载进度，更新downloadProgress}