图片裁剪

src/components/Cropper/src/Cropper.vue

@@ -2,20 +2,38 @@
   <div class="img-cropper" :class="{ 'img-cropper-auto': $slots.default, circled: circled }">
     <slot name="default"></slot>
     <template v-if="!$slots.default">
+      <template v-if="src">
         <div class="img-cropper-img" @click="openCropper">
-        <img :src="src" :class="{ circled: circled }" v-if="src"/>
+          <img :src="src" :class="{ circled: circled }"/>
-        <div class="addImg"  v-else>
+          <div class="mask" :class="{ circled: circled }"  @click.stop>
+            <div class="handle-icon" @click="openCropper">
+              <el-icon >
+                <Edit />
+              </el-icon>
+            </div>
+            <div class="handle-icon" @click="viewImg">
+              <el-icon>
+                <ZoomIn />
+              </el-icon>
+            </div>
+            <div class="handle-icon" @click="deleteImg">
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+      <div class="img-cropper-img" @click="openCropper">
+        <div class="addImg">
           <el-icon>
           <plus />
         </el-icon>
         </div>
-        <div class="mask" :class="{ circled: circled }">
-          <el-icon class="el-input__icon">
-            <UploadOutlined />
-          </el-icon>
-        </div>
       </div>
       </template>
+    </template>
     <CropperModal
       ref="cropperRef"
       :title="title"
@@ -30,7 +48,6 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import CropperModal from './CropperModal.vue';
-  import { UploadOutlined } from '@vicons/antd';
   import { cssUnit } from '@/utils';
 
   const cropperRef = ref();
@@ -39,7 +56,7 @@
     title: { type: String, default: '图片上传' },
     src: { type: String, required: true },
     circled: { type: Boolean, default: false },
-    width: { type: [String, Number], default: 200 },
+    width: { type: [String, Number], default: 150 },
     uploadApi: {
       type: Function as PropType<(params) => Promise<any>>,
     },
@@ -50,9 +67,15 @@
   const iconSize = cssUnit(Math.ceil(parseInt(getWidth) / 4));
 
   const emit = defineEmits(['uploadSuccess']);
-function handleSuccess(value){
+  const viewImg =()=>{
+    window.open(props.src)
+  }
+  const deleteImg = () => {
+    emit('uploadSuccess', {fileUrl:''});
+  };
+  function handleSuccess(value){
     emit('uploadSuccess',value)
-}
+  }
   function openCropper() {
     cropperRef.value.showModal();
   }
@@ -100,11 +123,19 @@ function handleSuccess(value){
         left: 0;
         top: 0;
         opacity: 0;
+        padding: 0 6%;
         transition: opacity 0.4s;
-
+        .handle-icon {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					padding: 0 6%;
+					color: aliceblue;
 					.el-icon {
 						color: #fff;
-          font-size: v-bind(iconSize);
+            font-size:20px;
+					}
 				}
       }
 

src/components/Cropper/src/CropperModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <basicModal ref="modalRef" @register="modalRegister" @ok="handleOk">
+  <basicModal ref="modalRef" @register="modalRegister" @ok="handleOk" @close="handleClose">
     <template #default>
       <div class="cropper-box">
         <div class="cropper-box-left">
@@ -17,7 +17,7 @@
             <el-upload
               :show-file-list="false"
               accept="image/*"
-              action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+             :http-request="handleHttpUpload"
               :before-upload="beforeUpload"
               style="width: auto"
             >
@@ -212,7 +212,8 @@
       function showModal() {
         openModal();
       }
-
+      function handleHttpUpload(){
+      }
       // 上传图片
       function beforeUpload(file) {
         const reader = new FileReader();
@@ -265,6 +266,10 @@
           }
         }
       }
+      function handleClose(){
+        src.value =''
+        previewSource.value=''
+      }
 
       return {
         src,
@@ -273,10 +278,12 @@
         previewSource,
         showModal,
         beforeUpload,
+        handleHttpUpload,
         handleCropend,
         handleReady,
         handlerToolbar,
         handleOk,
+        handleClose
       };
     },
   });

src/views/system/user/edit.vue

@@ -105,7 +105,7 @@
                        v-model:image-url="formData.avatar">
               <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
             </UploadImg> -->
-              <Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" title="矩形头像上传" @uploadSuccess="uploadSuccess">
+              <Cropper ref="cropperCircled" :src="formData.avatar" :uploadApi="upload" title="头像上传" @uploadSuccess="uploadSuccess">
                 <template #avatar>
                 </template>
               </Cropper>
@@ -193,6 +193,7 @@ const passwordConfirmValidator = (
 
 const uploadSuccess =(data)=>{
   formData.avatar = data.fileUrl
+  formRef.value?.validateField("avatar");
 }
 const dialogClose = () => {
   emit("update:visible", false);
@@ -250,10 +251,6 @@ const getAllDict = async () => {
   list = await getPositionAllList();
   optionData.positionList = list ? list : [];
 };
-function cropperCircledImg() {
-    cropperCircled.value.openCropper();
-  }
-
 onMounted(() => {
   getAllDict()
   if (props.userId) {