chore: 应用更新头像支持裁切

src/components/upload-image/upload-image.vue

 <script setup lang="ts">
-import { computed, ref, useSlots } from 'vue'
+import { computed, ref, useSlots, useTemplateRef } from 'vue'
 import CustomIcon from '../custom-icon/custom-icon.vue'
 import { fetchUpload } from '@/apis/upload'
+import ImageCropper from '@/components/image-cropper/image-cropper.vue'
 
 interface Emit {
   (e: 'formatError'): void
@@ -20,7 +21,7 @@ const props = defineProps({
   },
   listType: {
     type: Array,
-    default: () => ['jpg', 'png', 'jpeg', 'svg', 'gif'],
+    default: () => ['jpg', 'png', 'jpeg', 'gif'],
   },
   width: {
     type: Number,
@@ -36,6 +37,8 @@ const emit = defineEmits<Emit>()
 
 const slots = useSlots()
 
+const imageCropperRef = useTemplateRef<InstanceType<typeof ImageCropper> | null>('imageCropperRef')
+
 const uploadLoading = ref(false)
 const isShowImageMask = ref(false)
 
@@ -66,11 +69,9 @@ async function handleUploadImage(event: any) {
     return
   }
 
+  if (imageCropperRef.value && file) {
     const URL = window.URL || window.webkitURL
-  const img = new Image()
-  img.src = URL.createObjectURL(file)
-
-  img.onload = async function () {
+    imageCropperRef.value.cropImage(URL.createObjectURL(file)).then(async (file) => {
       const formData = new FormData()
       formData.append('file', file)
 
@@ -84,6 +85,7 @@ async function handleUploadImage(event: any) {
       if (res.code === 0) {
         uploadImageUrl.value = res.data as string
       }
+    })
   }
 }
 </script>
@@ -120,5 +122,7 @@ async function handleUploadImage(event: any) {
 
       <input id="upload" type="file" :accept="uploadImageType" class="hidden" @change="handleUploadImage" />
     </div>
+
+    <ImageCropper ref="imageCropperRef" />
   </div>
 </template>