build

vu/src/components/PreviewImg/index.vue

+<template>
+  <div
+    class="preview-wrap"
+    @click="preview">
+    <img :src="silders" >
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    silders: ''
+  },
+  methods: {
+    preview() {
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+    .preview-wrap {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, .4);
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

vu/src/components/Upload/EditUpload.vue

 <template lang="html">
-<div class="upload-image-wrap" ref="uploadImage">
+  <div
+    ref="uploadImage"
+    class="upload-image-wrap">
     <div v-if="multiple">
-        <ul class="upload-image-items" v-if="currImages.length">
-            <li class="upload-image-item" v-for="(item, inx) in currImages" :disabled="disabled">
-                <div class="image-inner" v-resize="item"></div>
-                <div class="image-after" @click.stop="deleteImage(inx)"></div>
+      <ul
+        v-if="currImages.length"
+        class="upload-image-items">
+        <li
+          v-for="(item, inx) in currImages"
+          :disabled="disabled"
+          class="upload-image-item">
+          <div
+            v-resize="item"
+            class="image-inner"/>
+          <div class="image-after">
+            <span @click.stop="deleteImage(inx)"/>
+            <span @click.stop="lookImage(item)"/>
+          </div>
         </li>
         <li class="upload-image-item upload-icon">
-                <upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
-                    <slot></slot>
+          <upload-img
+            class="multiple"
+            @upload-img="onUpload"
+            @uploaded="onUploaded"
+            @error="onUploadError">
+            <slot/>
           </upload-img>
         </li>
       </ul>
-        <div class="upload-icon" v-else>
-            <upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
-                <slot></slot>
+      <div
+        v-else
+        class="upload-icon">
+        <upload-img
+          class="multiple"
+          @upload-img="onUpload"
+          @uploaded="onUploaded"
+          @error="onUploadError">
+          <slot/>
         </upload-img>
       </div>
+      <preview-img
+        v-if="isflag"
+        v-model="isflag"
+        :silders="silders"/>
     </div>
     <div v-else>
       <div class="upload-icon single-upload">
-            <div class="single-upload-icon" v-resize="currImages">
+        <div
+          v-resize="currImages"
+          class="single-upload-icon">
           <span v-if="currImages">修改图片</span>
         </div>
-            <div :class="{ hide: currImages != false }" class="single-upload-body">
-                <upload-img class="multiple" @upload-img="onSingleUpload" @uploaded="onUploaded" @error="onUploadError">
-                    <slot v-if="currImages == false"></slot>
+        <div
+          :class="{ hide: currImages != false }"
+          class="single-upload-body">
+          <upload-img
+            class="multiple"
+            @upload-img="onSingleUpload"
+            @uploaded="onUploaded"
+            @error="onUploadError">
+            <slot v-if="currImages == false"/>
           </upload-img>
         </div>
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 // import './webuploader'
 import Resize from '@/components/Upload/utils/resizeImage'
 import UploadImg from '@/components/Upload/UploadImgBox'
+import PreviewImg from '@/components/PreviewImg'
 
 export default {
-    data () {
-        return {
-            inputValue: this.value
-        }
-    },
   directives: {
     Resize
   },
+  components: {
+    PreviewImg,
+    UploadImg
+  },
   props: {
     value: {
       type: [Array, String]
@@ -57,28 +91,35 @@ export default {
     disabled: Boolean,
     multiple: Boolean
   },
-    watch: {
-        value (newVal) {
-            this.inputValue = newVal
+  data() {
+    return {
+      inputValue: this.value,
+      isflag: false,
+      silders: ''
     }
   },
   computed: {
-        currImages () {
+    currImages() {
       if (this.multiple && Array.isArray(this.inputValue)) {
-                let images = [...this.inputValue]
+        const images = [...this.inputValue]
         return images.length ? images : []
       } else {
         return this.inputValue || ''
       }
     }
   },
+  watch: {
+    value(newVal) {
+      this.inputValue = newVal
+    }
+  },
   methods: {
     // 上传中...
-        onUpload (res) {
+    onUpload(res) {
       if (!res.data.file_url) return
       console.log(this.inputValue)
-            let content = this.inputValue.length
-            let limit = Number(this.limit)
+      const content = this.inputValue.length
+      const limit = Number(this.limit)
       if (limit && content >= limit) {
         this.$emit('limit', content)
       } else {
@@ -86,26 +127,28 @@ export default {
         this.$emit('input', this.inputValue)
       }
     },
-        onSingleUpload (res) {
+    onSingleUpload(res) {
       if (!res.data.file_url) return
       this.inputValue = res.data.file_url
       this.$emit('input', res.data.file_url)
     },
     // 上传完成
-        onUploaded (res) {
+    onUploaded(res) {
     },
 
-        onUploadError (error) {
+    onUploadError(error) {
       console.log(error)
     },
 
-        deleteImage (inx) {
+    deleteImage(inx) {
       this.inputValue.splice(inx, 1)
       this.$emit('input', this.inputValue)
-        }
     },
-    components: {
-        UploadImg
+
+    lookImage(item) {
+      this.isflag = true
+      this.silders = item
+    }
   }
 }
 </script>
@@ -164,11 +207,42 @@ export default {
                     position: absolute;
                     left: 50%;
                     top: 50%;
-                    transform: translate(-50%, -50%);
+                    transform: translate(-100%, -50%);
                     width: 18px;
                     height: 18px;
                     background: url('../../assets/image/svg/uploadDelete.svg') 50% 50% no-repeat;
                 }
+                &:before {
+                    content: '';
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(50%, -50%);
+                    width: 18px;
+                    height: 18px;
+                    background: url('../../assets/image/svg/magnifier.png') no-repeat;
+                    background-size: 18px;
+                }
+                span{
+                    &:first-child{
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-80%, -50%);
+                        width: 30px;
+                        height: 30px;
+                        z-index: 999;
+                    }
+                    &:last-child{
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(10%, -50%);
+                        width: 30px;
+                        height: 30px;
+                        z-index: 999;
+                    }
+                }
             }
             &[disabled]::before {
                 position: absolute;