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,24 +69,23 @@ async function handleUploadImage(event: any) {
     return
   }
 
-  const URL = window.URL || window.webkitURL
-  const img = new Image()
-  img.src = URL.createObjectURL(file)
+  if (imageCropperRef.value && file) {
+    const URL = window.URL || window.webkitURL
+    imageCropperRef.value.cropImage(URL.createObjectURL(file)).then(async (file) => {
+      const formData = new FormData()
+      formData.append('file', file)
 
-  img.onload = async function () {
-    const formData = new FormData()
-    formData.append('file', file)
+      uploadLoading.value = true
 
-    uploadLoading.value = true
+      const res = await fetchUpload(formData).finally(() => {
+        uploadLoading.value = false
+        event.target.value = null
+      })
 
-    const res = await fetchUpload(formData).finally(() => {
-      uploadLoading.value = false
-      event.target.value = null
+      if (res.code === 0) {
+        uploadImageUrl.value = res.data as string
+      }
     })
-
-    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>