提交代码

src/components/ImageUpload/index.vue

@@ -27,28 +27,34 @@
       <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
       的文件
     </div>
+    <el-image-viewer
+      v-show="dialogVisible2"
+      :z-index="9999"
+      :on-close="closeImgViewer"
+      :url-list="fileList.map(t => t.url)"
+      :initial-index="imgIndex"
+    />
 
     <el-dialog
       :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
+      title="浏览视频"
+      width="70%"
       append-to-body
     >
-      <video v-if="type==='mp4'"
-             :src="dialogImageUrl"
-             style="display: block; max-width: 100%; margin: 0 auto" controls="controls"/>
-      <img v-else
-           :src="dialogImageUrl"
-           style="display: block; max-width: 100%; margin: 0 auto"
-      />
+      <video
+        v-if="dialogVisible"
+        :src="dialogImageUrl"
+        autoplay
+        style="display: block; max-width: 100%; max-height: 80vh; margin: 0 auto" controls="controls"/>
     </el-dialog>
   </el-form>
 </template>
 
 <script>
   import { getToken } from "@/utils/auth";
-
+  import ElImageViewer from "element-ui/packages/image/src/image-viewer";
   export default {
+    components:{ElImageViewer},
     props: {
       value: [String, Object, Array],
       // 图片数量限制
@@ -80,7 +86,9 @@
       return {
         dialogImageUrl: "",
         dialogVisible: false,
+        dialogVisible2: false,
         hideUpload: false,
+        imgIndex: 0, //当前选择的哪张图片
         type:"",
         baseUrl: process.env.VUE_APP_BASE_API,
         uploadImgUrl: process.env.VUE_APP_BASE_API + "/obs", // 上传的图片服务器地址
@@ -119,6 +127,12 @@
       },
     },
     methods: {
+      /**
+       * @description 关闭图片查看器
+       */
+      closeImgViewer() {
+        this.dialogVisible2 = false;
+      },
       // 删除图片
       handleRemove(file, fileList) {
         const findex = this.fileList.map(f => f.name).indexOf(file.name);
@@ -189,8 +203,11 @@
       // 预览
       handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
         this.type=file.name.slice(file.name.lastIndexOf(".")+1);
+        if (this.type === 'mp4')
+        this.dialogVisible = true;
+        else
+        this.dialogVisible2 = true;
         console.log(this.type)
       },
       // 对象转成指定字符串分隔

src/views/gas/regulatorBox/index.vue

@@ -103,7 +103,7 @@
           <el-image
             style="width: 50px; height: 50px"
             :src="scope.row.photoList[0]"
-            :preview-src-list="[scope.row.photoList[0]]">
+            :preview-src-list="scope.row.photoList">
           </el-image>
         </template>
       </el-table-column>