上传图也能图片预览

src/views/system_manage/components/imgUpload.vue

@@ -8,7 +8,7 @@
             </template>
             <template v-else>
                 <img class="upload-img" :src="imgUrl" alt="配图">
-                <span class="upload-mask">
+                <span class="upload-mask" @click.stop="showImage">
                     <span class="mask-icon" @click.stop="handleRemove">
                         <i class="el-icon-delete"></i>
                     </span>
@@ -42,6 +42,9 @@
             },
             handleRemove() {
                 this.$emit('remove')
+            },
+            showImage(){
+                this.$emit('showImage',[this.imgUrl])
             }
         },
     };

src/views/system_manage/etaBaseConfig.vue

@@ -11,6 +11,7 @@
                     <el-form-item label="公司水印" prop="CompanyWatermark" class="watermark">
                         <ImgUpload 
                             :imgUrl="formData.CompanyWatermark"
+                            @showImage="showImage"
                             @upload="(file)=>handleUploadImage(file,'CompanyWatermark')"
                             @remove="deleteFormImg('CompanyWatermark')"
                             />
@@ -44,6 +45,7 @@
                         <div class="input-line" style="display:flex;">
                             <ImgUpload 
                                 :imgUrl="formData.CnPptCoverImgs.length===3?formData.CnPptCoverImgs[2]:''"
+                                @showImage="showImage(formData.CnPptCoverImgs)"
                                 @upload="(file)=>handleUploadImage(file,'CnPptCoverImgs')"
                                 @remove="deleteFormImg('CnPptCoverImgs',formData.CnPptCoverImgs.length-1)"
                                 />
@@ -58,6 +60,7 @@
                     <el-form-item label="PPT背景图" prop="CnPptBackgroundImg">
                         <ImgUpload 
                             :imgUrl="formData.CnPptBackgroundImg"
+                            @showImage="showImage"
                             @upload="(file)=>handleUploadImage(file,'CnPptBackgroundImg')"
                             @remove="deleteFormImg('CnPptBackgroundImg')"
                             />
@@ -67,6 +70,7 @@
                     <el-form-item label="PPT封底图" prop="CnPptBottomImg">
                         <ImgUpload 
                             :imgUrl="formData.CnPptBottomImg"
+                            @showImage="showImage"
                             @upload="(file)=>handleUploadImage(file,'CnPptBottomImg')"
                             @remove="deleteFormImg('CnPptBottomImg')"
                             />
@@ -79,6 +83,7 @@
                         <div class="input-line" style="display:flex;">
                             <ImgUpload 
                                 :imgUrl="formData.EnPptCoverImgs.length===3?formData.EnPptCoverImgs[2]:''"
+                                @showImage="showImage(formData.EnPptCoverImgs)"
                                 @upload="(file)=>handleUploadImage(file,'EnPptCoverImgs')"
                                 @remove="deleteFormImg('EnPptCoverImgs',formData.EnPptCoverImgs.length-1)"
                                 />
@@ -93,6 +98,7 @@
                     <el-form-item label="PPT背景图" prop="EnPptBackgroundImg">
                         <ImgUpload 
                             :imgUrl="formData.EnPptBackgroundImg"
+                            @showImage="showImage"
                             @upload="(file)=>handleUploadImage(file,'EnPptBackgroundImg')"
                             @remove="deleteFormImg('EnPptBackgroundImg')"
                             />
@@ -102,6 +108,7 @@
                     <el-form-item label="PPT封底图" prop="EnPptBottomImg">
                         <ImgUpload 
                             :imgUrl="formData.EnPptBottomImg"
+                            @showImage="showImage"
                             @upload="(file)=>handleUploadImage(file,'EnPptBottomImg')"
                             @remove="deleteFormImg('EnPptBottomImg')"
                             />
@@ -252,8 +259,8 @@ export default {
     },
     methods: {
         handleUploadImage(file,key){
-            console.log('type',key)
-            console.log('file',file)
+            /* console.log('type',key)
+            console.log('file',file) */
             //如果是封面图
             if(['CnPptCoverImgs','EnPptCoverImgs'].includes(key)&&this.formData[key].length===3){
                 this.$message.warning('封面图最多只能上传三张')
@@ -261,13 +268,13 @@ export default {
             }
             //图片大小和格式限制
             const {size,type} = file.file
-            const sizeLimit = key==='CompanyWatermark'?10*1024:500*1024
+            const sizeLimit = key==='CompanyWatermark'?50*1024:500*1024
             if(!['image/png','image/jpeg'].includes(type)){
                 this.$message.warning('仅支持png、jpg格式的图片')
                 return
             }
             if(size>sizeLimit){
-                this.$message.warning(`${key==='CompanyWatermark'?'水印图大小不能超过10kb':'ppt配图大小不能超过500kb'}`)
+                this.$message.warning(`${key==='CompanyWatermark'?'水印图大小不能超过50kb':'ppt配图大小不能超过500kb'}`)
                 return
             }