照片放大后可上一张下一张切换

src/components/ObsImageUpload/index.vue

@@ -17,7 +17,7 @@
                :on-preview="handlePictureCardPreview"
                :class="{hide: this.fileList.length >= this.limit}"
     >
-      <i class="el-icon-plus abs"></i>
+      <i class="el-icon-plus abs">1111</i>
     </el-upload>
 
     <!-- 上传提示 -->
@@ -28,28 +28,38 @@
       的文件
     </div>
 
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800px"
-      append-to-body
-    >
-      <video v-if="type==='mp4'"
-             :src="dialogImageUrl"
-             style="display: block; max-width: 100%; margin: 0 auto" controls="controls"/>
-      <el-image v-else
-           :src="dialogImageUrl"
-           :preview-src-list="[dialogImageUrl]"
-           style="display: block; max-width: 70%; margin: 0 auto"
-      />
-    </el-dialog>
+    <el-image-viewer
+      v-if="dialogVisible"
+      zIndex="9999"
+      :on-close="closeImgViewer"
+      :url-list="fileList.map(t => t.url)"
+      :initial-index="imgIndex"
+    />
+<!--    <el-dialog-->
+<!--      :visible.sync="dialogVisible"-->
+<!--      title="预览"-->
+<!--      width="800px"-->
+<!--      append-to-body-->
+<!--    >-->
+<!--      <video v-if="type==='mp4'"-->
+<!--             :src="dialogImageUrl"-->
+<!--             style="display: block; max-width: 100%; margin: 0 auto" controls="controls"/>-->
+<!--      <el-image v-else-->
+<!--           :src="dialogImageUrl"-->
+<!--           :preview-src-list="[dialogImageUrl]"-->
+<!--           style="display: block; max-width: 70%; margin: 0 auto"-->
+<!--      />-->
+<!--    </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],
     // 图片数量限制
@@ -88,6 +98,7 @@ export default {
       headers: {
         Authorization: "Bearer " + getToken(),
       },
+      imgIndex:0,
       fileList: []
     };
   },
@@ -120,6 +131,13 @@ export default {
     },
   },
   methods: {
+    /**
+     * @description 关闭图片查看器
+     */
+    closeImgViewer() {
+      this.dialogVisible = false;
+    },
+
     // 删除图片
     handleRemove(file, fileList) {
       const findex = this.fileList.map(f => f.url).indexOf(file.url);