修改

src/views/system/trainingAvatar/index.vue

@@ -1,65 +1,32 @@
 <template>
   <div>
     <div class="user-info-head" :class="video.VideoPath ? 'wihi' : ''" @click="editCropper()">
-      <video
+      <video style="width: 208px; height: 208px" v-bind:src="video.VideoPath" v-if="video.VideoPath"
-        style="width: 208px; height: 208px"
+        class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
-        v-bind:src="video.VideoPath"
+      <i class="el-icon-plus avatar-uploader-icon" style="
-        v-if="video.VideoPath"
+            position: absolute;
-        class="avatar video-avatar"
+            top: 50%;
-        controls="controls"
+            left: 50%;
-      >您的浏览器不支持视频播放</video>
+            transform: translate(-50%, -50%);
-      <i
+          "></i>
-        class="el-icon-plus avatar-uploader-icon"
-        style="
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        "
-      ></i>
     </div>
-    <el-dialog
+    <el-dialog :title="title" :visible.sync="openimg" width="950px" append-to-body @opened="modalOpened"
-      :title="title"
+      @close="closeDialog">
-      :visible.sync="openimg"
-      width="950px"
-      append-to-body
-      @opened="modalOpened"
-      @close="closeDialog"
-    >
       <el-row>
         <el-col :xs="24" :md="24" :style="{ height: '350px' }">
           <div class="avatar-upload-preview">
-            <video
+            <video v-if="openimg" style="width: 100%; height: 100%" v-bind:src="videoForm.showVideoPath"
-              v-if="openimg"
+              class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
-              style="width: 100%; height: 100%"
-              v-bind:src="videoForm.showVideoPath"
-              class="avatar video-avatar"
-              controls="controls"
-            >您的浏览器不支持视频播放</video>
           </div>
         </el-col>
       </el-row>
       <br />
-      <el-progress
+      <el-progress v-if="progressFlag" :percentage="loadProgress" style="height:30px;padding-bottom:20px"></el-progress>
-        v-if="progressFlag"
-        :percentage="loadProgress"
-        style="height:30px;padding-bottom:20px"
-      ></el-progress>
       <el-row style="padding-bottom:0px">
         <el-col :lg="3" :md="2">
-          <el-upload
+          <el-upload :show-file-list="false" class="upload-demo" ref="upload" :action="uploadurl"
-            :show-file-list="false"
+            :on-preview="handlePreview" :auto-upload="false" :on-change="loadJsonFromFile" :data="filedata"
-            class="upload-demo"
+            :headers="headers" :on-progress="uploadVideoProcess" :on-success="handleAvatarSuccess">
-            ref="upload"
-            :action="uploadurl"
-            :on-preview="handlePreview"
-            :auto-upload="false"
-            :on-change="loadJsonFromFile"
-            :data="filedata"
-            :headers="headers"
-            :on-progress="uploadVideoProcess"
-            :on-success="handleAvatarSuccess"
-          >
             <el-button slot="trigger" size="small" type="primary" style="float:left">选取文件</el-button>
           </el-upload>
         </el-col>
@@ -140,8 +107,10 @@ export default {
         this.uploadbtn = true;
         if (newimg == null) {
           this.video.VideoPath = null;
+          this.videoForm.showVideoPath = null
         } else if (newimg == "") {
           this.video.VideoPath = null;
+          this.videoForm.showVideoPath = null
         } else {
           this.videoForm.showVideoPath = process.env.VUE_APP_BASE_API + newimg;
           this.video.VideoPath = process.env.VUE_APP_BASE_API + newimg;
@@ -184,7 +153,7 @@ export default {
       this.uploadbtn = false;
       this.$refs.upload.submit();
     },
-    handlePreview(file) {},
+    handlePreview(file) { },
     // 编辑头像
     editCropper() {
       this.openimg = true;
@@ -194,7 +163,7 @@ export default {
       this.visible = true;
     },
     // 覆盖默认的上传行为
-    requestUpload() {},
+    requestUpload() { },
     // 向左旋转
     rotateLeft() {
       this.$refs.cropper.rotateLeft();
@@ -277,6 +246,7 @@ export default {
   left: 50%;
   transform: translate(-50%, 0%);
 }
+
 .avatar-upload-preview {
   position: absolute;
   top: 0%;
@@ -288,6 +258,7 @@ export default {
   box-shadow: 0 0 4px #ccc;
   overflow: hidden;
 }
+
 .user-info-head {
   position: relative;
   display: inline-block;
@@ -313,11 +284,13 @@ export default {
   line-height: 110px;
   border-radius: 50%;
 }
+
 .wihi {
   background-color: #fff;
   width: 100px;
   height: 100px;
 }
+
 .wihi:hover:after {
   transform: translate(50%, 50%);
 }