Auto Commit

src/components/cropperUpload/index.vue

@@ -9,7 +9,7 @@
 <template>
   <div class="uploadMian">
     <div class="img-item" v-for="(item, index) in fileList" :key="index">
-      <img :src="item.src" />
+      <img @click='previewImg=item.src;previewImgDialog=true;' :src="item.src" />
       <el-icon class="uploader-close" @click="delFn(index)"><Close /></el-icon>
       <div v-if="item.isSuccess" class="uploader-Check"><el-icon ><Check /></el-icon></div>
       <div class="button-div" v-if="item.file && isCropper">
@@ -80,6 +80,11 @@
 
     </div>
   </el-dialog>
+
+
+  <el-dialog title="预览图片" v-model="previewImgDialog" width="550px" :close-on-press-escape="false" :close-on-click-modal="false">
+        <img style="width:100%;height:100%;object-fit:contain" :src='previewImg' />
+  </el-dialog>
 </template>
 
 <script setup>
@@ -150,6 +155,8 @@ const acceptType = reactive({
 });
 const showClose=ref(true)
 const loadingGifCrooper=ref(false)
+const previewImg=ref('')
+const previewImgDialog=ref(false)
 // 裁剪的配置
 const option = reactive({
   img: "", // 裁剪图片的地址
@@ -257,6 +264,8 @@ const judegFileSize = (file) => {
   }
   return retunBoolean;
 };
+
+// 上传之前
 const beforeAvatarUpload = (rawFile) => {
   let retunBoolean = judegFileSize(rawFile);
   if (retunBoolean) {
@@ -268,6 +277,7 @@ const beforeAvatarUpload = (rawFile) => {
   return retunBoolean;
 };
 
+
 // 裁剪
 const cropperFn = (item, index) => {
   showCropper.value = true;