课堂视频进度条

src/components/pages/classroomObservation/components/baseMessage.vue

@@ -171,6 +171,7 @@
 								<div
 									class="m-m-fi-imageItem"
 									style="max-width:33%;"
+									v-if="imageList.videoList.length"
 									v-for="(item, index) in imageList.videoList?imageList.videoList:[]"
 									:key="index"
 									@click.stop="previewVideo(item.url)"
@@ -183,14 +184,12 @@
 									></el-image>
 									<span @click.stop="delVideo('videoList')">x</span>
 								</div>
-
+							<el-progress v-if="progressData.uploadVideo && !imageList.videoList.length" class="m_m_fi_progress" :percentage="progressData.value"></el-progress>
 							<div
 								class="m-m-fi-imageItem"
 								@click.stop="addVideo()"
 								style="max-width:33%;"
-								v-if="
-									(imageList.videoList&&imageList.videoList.length<=0) || !imageList.videoList
-								"
+								v-if="(((imageList.videoList&&imageList.videoList.length<=0) || !imageList.videoList) && !progressData.uploadVideo)"
 							>
 								<img
 									src="../../../../assets/icon/classroomObservation/Union.svg"
@@ -284,6 +283,10 @@ export default {
 				{ value: "音乐", label: "音乐" },
 				{ value: "其他", label: "其他" },
 			],
+			progressData:{
+				uploadVideo:false,
+				value:0,
+			}
 		};
 	},
 	methods: {
@@ -361,7 +364,8 @@ export default {
 			input.accept = "video/*";
 			input.click();
 			input.onchange = () => {
-				this.uploadVideoLoading = true;
+				this.progressData.uploadVideo = true;
+				// this.uploadVideoLoading = true;
 				let file = input.files[0];
 				var credentials = {
 					accessKeyId: "AKIATLPEDU37QV5CHLMH",
@@ -390,11 +394,13 @@ export default {
 						queueSize: 2,
 						leavePartsOnError: true,
 					};
+					
 					bucket
 						.upload(params, options)
 						.on("httpUploadProgress", function (evt) {
 							//这里可以写进度条
 							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+							_this.progressData.value = parseInt((evt.loaded * 100) / evt.total)
 						})
 						.send(function (err, data) {
 							if (err) {
@@ -407,7 +413,9 @@ export default {
 										url: data.Location,
 								})
 							}
-							_this.uploadVideoLoading = false;
+							_this.progressData.uploadVideo = false;
+							_this.progressData.value = 0;
+							// _this.uploadVideoLoading = false;
 						});
 				}
 			};
@@ -673,4 +681,8 @@ export default {
 	margin-left: 1.5%;
 	height: auto;
 }
+
+.m_m_fi_progress{
+	width: 100%;
+}
 </style>