wangtong 1 rok temu
rodzic
commit
417bf838b6
1 zmienionych plików z 27 dodań i 3 usunięć
  1. 27 3
      src/components/ObsImageUpload/index.vue

+ 27 - 3
src/components/ObsImageUpload/index.vue

@@ -32,9 +32,24 @@
       v-if="dialogVisible"
       zIndex="9999"
       :on-close="closeImgViewer"
-      :url-list="fileList.map(t => t.url)"
+      :url-list="fileList.map(t => t.url).filter(t=>!(t.slice(t.lastIndexOf('.')+1)==='mp4'))"
       :initial-index="imgIndex"
     />
+    <el-dialog
+      :visible.sync="videodialogVisible"
+      title="预览"
+      width="800px"
+      append-to-body
+    >
+      <video
+        :src="dialogImageUrl"
+        id="video"
+        autoplay
+        loop
+        muted
+        controls
+        style="display: block; max-width: 800px; max-height: 600px; margin: 0 auto" controls="controls"/>
+    </el-dialog>
 <!--    <el-dialog-->
 <!--      :visible.sync="dialogVisible"-->
 <!--      title="预览"-->
@@ -51,6 +66,7 @@
 <!--      />-->
 <!--    </el-dialog>-->
   </el-form>
+
 </template>
 
 <script>
@@ -91,6 +107,7 @@ export default {
     return {
       dialogImageUrl: "",
       dialogVisible: false,
+      videodialogVisible: false,
       hideUpload: false,
       type:"",
       baseUrl: process.env.VUE_APP_BASE_API,
@@ -135,6 +152,7 @@ export default {
      * @description 关闭图片查看器
      */
     closeImgViewer() {
+      this.imgIndex=0;
       this.dialogVisible = false;
     },
 
@@ -211,9 +229,15 @@ export default {
     // 预览
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
       this.type=file.name.slice(file.name.lastIndexOf(".")+1);
-      console.log(this.type)
+     this.imgIndex=this.fileList.map(t => t.url).filter(t=>!(t.slice(t.lastIndexOf('.')+1)=='mp4')).indexOf(file.url);
+     console.log(this.imgIndex)
+      if (this.type=='mp4')
+      {
+        this.videodialogVisible=true;
+      }else {
+        this.dialogVisible=true;
+      }
     },
     // 对象转成指定字符串分隔
     listToString(list, separator) {