el-upload 多文件上传进度
时间: 2023-09-12 17:04:57 浏览: 108
el-upload 组件是 Element UI 提供的一个文件上传组件,对于多文件上传进度的展示,你可以通过监听 `progress` 事件来获取上传进度,并在前端进行展示。
首先,你需要在 `el-upload` 组件上添加一个 `@progress` 事件监听器,例如:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-progress="handleUploadProgress"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
然后,在对应的 Vue.js 的 methods 中定义 `handleUploadProgress` 方法来处理进度更新:
```javascript
methods: {
handleUploadProgress(event, file, fileList) {
// event.loaded 表示已上传的字节数
// event.total 表示文件总字节数
const progress = Math.round((event.loaded / event.total) * 100);
console.log(`文件 ${file.name} 上传进度:${progress}%`);
}
}
```
在 `handleUploadProgress` 方法中,你可以根据需要对进度进行处理,例如更新进度条的显示或者展示一个实时的上传进度信息。
请注意,以上代码只是一个简单示例,你可能需要根据自己的实际需求进行适当的修改和扩展。另外,确保服务器端也能正确返回文件上传的进度信息给前端。
阅读全文