el-upload上传视频进度条
时间: 2023-11-23 14:57:38 浏览: 84
fileupload文件上传带进度条
根据引用[1]提供的代码,可以通过设置`onUploadProgress`属性来实现上传进度条的功能。具体实现方法如下:
```html
<el-upload
class="upload-demo"
action="/your-upload-api"
:on-progress="handleUploadProgress"
:show-file-list="false"
>
<el-button slot="trigger" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传mp4文件</div>
</el-upload>
```
```javascript
data() {
return {
uploadProgress: 0
}
},
methods: {
handleUploadProgress(event, file, fileList) {
if (event.lengthComputable) {
this.uploadProgress = Math.round((event.loaded / event.total) * 100)
}
}
}
```
在上述代码中,`on-progress`属性绑定了一个名为`handleUploadProgress`的方法,该方法会在上传过程中被调用,从而实现上传进度条的功能。具体来说,该方法会接收三个参数:`event`表示上传事件对象,`file`表示当前上传的文件对象,`fileList`表示已上传的文件列表。在该方法中,我们可以通过计算已上传的字节数和总字节数的比例来计算上传进度,并将其赋值给`uploadProgress`变量,从而实现上传进度条的更新。
阅读全文