el-upload自定义上传进度条怎么展示
时间: 2023-11-03 14:03:15 浏览: 293
用js控制的上传进度条的显示
你可以通过设置`:on-progress`属性来自定义el-upload组件的上传进度条。首先,在data中定义一个变量loadProgress来表示进度条的进度,再定义一个变量progressFlag来控制进度条的显示与隐藏。然后,在`:on-progress`事件中,根据文件的上传进度更新loadProgress的值,并将progressFlag设置为true以显示进度条。最后,在el-progress组件中使用loadProgress作为percentage属性来动态显示进度条。
代码示例:
```html
<template>
<!-- el-upload组件 -->
<el-upload
:action="UploadUrlR()"
:on-success="handleSuccessR"
:on-error="handleErrR"
multiple
:limit="1"
:show-file-list="false"
:on-exceed="handleExceed"
:file-list="fileList"
:on-progress="uploadVideoProcess"
style="display: inline-block;float:right"
>
<el-button
type="text"
size="small"
icon="el-icon-upload"
plain
class="none-border"
>
入口上传
</el-button>
</el-upload>
<!-- 进度条 -->
<el-progress
v-if="progressFlag"
type="circle"
:percentage="loadProgress"
width="250"
style="position: absolute;left: 34%;top: 37%;"
></el-progress>
</template>
<script>
export default {
data() {
return {
loadProgress: 0,
progressFlag: false
};
},
methods: {
uploadVideoProcess(event, file, fileList) {
// 根据上传进度更新loadProgress的值
this.loadProgress = event.percent;
// 显示进度条
this.progressFlag = true;
},
// 其他方法...
}
};
</script>
```
请问还有其他问题吗?
阅读全文