el-upload再带进度条修改

### 实现自定义上传进度条 为了在 `el-upload` 组件中实现自定义上传进度条的效果，可以利用该组件提供的事件钩子函数来控制和显示上传进度。具体来说，通过监听 `on-progress` 事件，在此期间更新状态或调用其他方法来自定义进度条的行为[^1]。 下面是一个简单的例子，展示了如何创建一个带有自定义样式进度条的文件上传功能： ```html <template> <div class="upload-demo"> <el-upload :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress" :file-list="fileList"> <button type="button">点击上传</button> <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过50MB</div> </el-upload> <!-- 自定义进度条 --> <el-progress v-if="showProgress" :percentage="progressPercent"></el-progress> </div> </template> <script> export default { data() { return { uploadUrl: '/api/upload', // 后端接口地址 fileList: [], // 文件列表 showProgress: false, // 是否显示进度条标志位 progressPercent: 0 // 当前进度百分比 }; }, methods: { handleProgress(event, file, fileList){ this.showProgress = true; this.progressPercent = parseInt(100 * event.percent / 100); console.log('当前进度:',this.progressPercent,'%'); }, beforeUpload(file) { const isLt2M = file.size / 1024 / 1024 < 50; // 检查大小是否小于50mb if (!isLt2M) { this.$message.error('上传视频大小不能超过 50MB!'); } return isLt2M; }, handleError(err, file, fileList){ this.$notify({ title: '错误', message: err, type: 'error' }); }, handleSuccess(response, file, fileList){ this.showProgress = false; this.$notify({ title: '成功', message: response.message || "上传完成", type: 'success' }); } } } </script> ``` 在这个实例里，当有新的上传请求发生时会触发 `handleProgress()` 方法，并传入三个参数：event对象包含了有关HTTP响应的信息；file表示正在被处理的那个文件；而fileList则是整个队列里的所有待处理项。这里主要关注的是从event获取到的percent属性值，它代表已完成的比例，将其转换成整数形式赋给data中的变量用于视图层面上的变化反映。 此外还设置了两个辅助性的布尔型数据成员——`showProgress` 和 `progressPercent` 来管理进度条的状态以及具体的数值变化情况。每当进度发生变化的时候就重新渲染一次页面上的进度条控件，从而达到动态跟踪的目的。