|
@@ -11,11 +11,13 @@
|
|
|
:on-success="handleSuccess"
|
|
|
:file-list="fileList"
|
|
|
:disabled="disabled"
|
|
|
+ :on-progress="uploadVideoProcess"
|
|
|
>
|
|
|
<div class="plus-icon"><i class="el-icon-plus"></i></div>
|
|
|
<div class="cn-tips">点击或拖拽图片到此上传</div>
|
|
|
<div class="en-tips">Only png, jpg can be uploaded, and the size does not exceed 100MB</div>
|
|
|
</el-upload>
|
|
|
+ <el-progress style="width: 100%" v-if="progressFlag" :percentage="loadProgress"></el-progress>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -42,7 +44,10 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ loadProgress: 0, // 动态显示进度条
|
|
|
+ progressFlag: false, // 关闭进度条
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
url() {
|
|
@@ -82,6 +87,7 @@ export default {
|
|
|
handleSuccess(response, file, fileList) {
|
|
|
if (response.status === 1) {
|
|
|
this.$message.success('上传成功');
|
|
|
+ this.progressFlag = false;
|
|
|
this.$emit('changeFillId', response.file_info_list[0], fileList);
|
|
|
}
|
|
|
},
|
|
@@ -93,6 +99,16 @@ export default {
|
|
|
this.curPercentage = 0;
|
|
|
}
|
|
|
},
|
|
|
+ uploadVideoProcess(event, file, fileList) {
|
|
|
+ this.progressFlag = true; // 显示进度条
|
|
|
+ this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
|
|
|
+ // if (this.loadProgress >= 100) {
|
|
|
+ // this.loadProgress = 100;
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.progressFlag = false;
|
|
|
+ // }, 1000); // 一秒后关闭进度条
|
|
|
+ // }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -128,7 +144,7 @@ export default {
|
|
|
.upload-wrapper-drag {
|
|
|
.el-upload {
|
|
|
width: 100%;
|
|
|
- height: 294px;
|
|
|
+ height: 274px;
|
|
|
}
|
|
|
.el-upload-dragger {
|
|
|
border: none;
|