Vue上传文件实时监听上传进度功能效果，支持 “多文件“ 同时上传下载及监听进度并自动计算进度条

Vue.js 提供了一种简单易用的方式来处理文件上传，并实时监控上传进度。在实现文件上传的实时进度监听时，通常会结合`axios`或`vue-file-upload`这样的第三方库来完成。以下是一个基本步骤：

1. 使用`vue-file-upload`库：首先安装依赖，例如在`npm`或`yarn`中运行命令：

   npm install vue-file-upload axios

2. 在组件模板中，创建一个`<input type="file">`元素让用户选择文件，并绑定事件处理函数：

   <el-input v-model="fileList" placeholder="点击选择文件" @change="handleFileChange"></el-input>
   <div v-if="uploadingFiles.length > 0">
     <el-progress :percentage="progress" :stroke-width="4" type="dashboard"></el-progress>
   </div>

`fileList`用于存储用户选择的文件，`uploadingFiles`用于跟踪正在上传的文件，`progress`表示当前进度。

3. 定义`handleFileChange`方法，处理文件选择事件，并初始化上传队列：

   methods: {
     handleFileChange(e) {
       this.fileList = e.target.files;
     },
     startUpload(file) {
       // 开始单个文件上传
     },
     uploadAll(files) {
       this.uploadingFiles = files.map(this.startUpload);
     }
   },
   mounted() {
     if (this.fileList.length) {
       this.uploadAll(this.fileList);
     }
   }

4. 在`startUpload`方法中，使用`axios`或其他HTTP库发送请求，并监听`onProgress`事件更新上传进度：

   startUpload(file) {
     const formData = new FormData();
     formData.append('file', file);

     const config = {
       onUploadProgress(progressEvent) {
         const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
         this.progress = progress;
       },
       url: 'your-api-url',
     };

     axios.post(config.url, formData)
       .then(response => ...)
       .catch(error => ...);
   }

5. 当所有文件都上传完毕时，可以清除`uploadingFiles`数组和更新进度条。