修改提交

src/views/system/trainingAvatar/index.vue

@@ -30,18 +30,19 @@
           <div class="avatar-upload-preview">
             <video
               style="width: 100%; height: 100%"
-              v-if="videoForm.showVideoPath"
               v-bind:src="videoForm.showVideoPath"
               class="avatar video-avatar"
               controls="controls"
             >您的浏览器不支持视频播放</video>
-            <img style="width: 100%; height: 100%" v-if="previews.url" :src="previews.url" />
-            <div v-else></div>
           </div>
         </el-col>
       </el-row>
       <br />
-      <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
+      <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
@@ -53,14 +54,16 @@
             :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>
         <el-col :lg="{ span: 2, offset: 18 }" :md="2">
           <el-button v-if="uploadbtn" type="primary" size="small" @click="submitUpload">提 交</el-button>
-          <el-button v-else :loading="!uploadbtn" type="primary" size="small">提 交 中...</el-button>
+          <el-button v-else :loading="!uploadbtn" type="primary" size="small">提交中...</el-button>
         </el-col>
       </el-row>
       <!-- <el-upload
@@ -126,6 +129,7 @@
 import { VueCropper } from "vue-cropper";
 import baseurl from "@/api/baseurl.js";
 import { uploadVideoUrl } from "@/api/system/stationAvatar.js";
+import { getToken } from "@/utils/auth";
 export default {
   components: { VueCropper },
   props: ["img", "type", "item", "tovideo"],
@@ -145,6 +149,9 @@ export default {
       filedata: {
         type: ""
       },
+      headers: {
+        Authorization: "Bearer " + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      },
       options: {
         img: null, //裁剪图片的地址
         autoCrop: true, // 是否默认生成截图框
@@ -164,6 +171,7 @@ export default {
     };
   },
   created() {
+    this.uploadbtn = true;
     this.filedata.type = this.type;
     this.items = this.item;
     this.video.VideoPath = baseurl + this.tovideo;
@@ -172,25 +180,16 @@ export default {
   watch: {
     tovideo: {
       handler(newimg, oldimg) {
+        this.uploadbtn = true;
         this.video.VideoPath = baseurl + this.tovideo;
       }
     },
     item: {
       handler(newimg, oldimg) {
+        this.uploadbtn = true;
         this.items = this.item;
       }
     },
-    img: {
-      handler(newimg, oldimg) {
-        if (this.img == null) {
-          this.options.img = null;
-        } else if (this.img == "") {
-          this.options.img = null;
-        } else {
-          this.options.img = baseurl + this.img;
-        }
-      }
-    },
     type: {
       handler(newimg, oldimg) {
         this.filedata.type = this.type;
@@ -218,7 +217,7 @@ export default {
       };
     },
     submitUpload() {
-      this.uploadbtn = true;
+      this.uploadbtn = false;
       this.$refs.upload.submit();
     },
     handlePreview(file) {},
@@ -255,6 +254,15 @@ export default {
         // this.options.img = reader.result;
       };
     },
+    handleAvatarSuccess(res, file) {
+      console.log(res);
+      this.video.VideoPath = baseurl + res.imgUrl;
+      this.items.itemDirectoryUrl = res.imgUrl;
+      this.$emit("item", JSON.stringify(this.items));
+      this.$modal.msgSuccess("上传视频成功");
+      this.openimg = false;
+      this.uploadbtn = true;
+    },
     // 上传图片
     uploadImg() {
       this.uploadbtn = true;
@@ -289,7 +297,6 @@ export default {
     },
     // 关闭窗口
     closeDialog() {
-      this.imgs = "";
       this.visible = false;
     }
   }

src/views/system/trainingItem/index.vue

@@ -1389,7 +1389,7 @@ export default {
   background: none;
 }
 ::v-deep .wihi:hover:after {
-  transform: translate(0%, 30%);
+  transform: translate(0%, 40%);
 }
 ::v-deep .video-avatar {
   transform: translateX(-25%);