上传这里进度条问题

This commit is contained in:
yanwenlong
2023-09-11 23:19:00 +08:00
parent 2d6f79d088
commit 9d666bfa77

View File

@@ -46,10 +46,13 @@
<el-upload :limit="1" class="el-uploadvideo "
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
:action="baseUrl + '/oss/fileoss'"
:file-list="videoList" :on-success="videohandlePicSuccess" accept=".mp4" :on-remove="videohandleRemove">
:file-list="videoList" :on-success="videohandlePicSuccess" accept=".mp4" :on-remove="videohandleRemove"
:show-file-list="true"
:on-progress="uploadVideoProcess">
<!-- <i class="el-icon-plus"></i> -->
<el-button slot="trigger" size="small" type="primary">上传文件</el-button>
</el-upload>
<el-progress v-show="progressFlag" :percentage="loadProgress"></el-progress>
<div>
<video controls width="250" v-if="dataForm.video != ''">
<source :src="dataForm.video" type="video/mp4" />
@@ -87,7 +90,9 @@
export default {
data() {
return {
return {
progressFlag: false,
loadProgress: 0,
baseUrl: global.baseUrl,
visible: false,
categorys: [],
@@ -339,7 +344,16 @@
} else {
this.$message.error("上传失败");
}
},
},
uploadVideoProcess(event, file, fileList) {
this.progressFlag = true; // 显示进度条
this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
console.log('this.loadProgress',this.loadProgress)
if (this.loadProgress >= 100) {
this.loadProgress = 99
// setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
}
},
videohandlePicSuccess(res, file) {
console.log(res,'res')
@@ -351,7 +365,8 @@
})
this.dataForm.video = res.url
// console.log(this.dataForm.productImages,'productImages')
this.$message.success("上传成功");
this.loadProgress = 100
setTimeout( () => {this.progressFlag = false;this.$message.success("上传成功");}, 1000) // 一秒后关闭进度条
} else {
this.$message.error("上传失败");
}
@@ -426,7 +441,11 @@
// font-size: 12px;
// }
// }
.el-uploadvideo{
.el-progress {
display: none !important;
}
}
.el-uploadfeng {
.el-upload-list__item {
width: 120px;