fix：关闭头像上传时，又自动打开

reactor：头像上传时，通过前端 httpRequest ，可支持前端直传

src/views/Profile/components/UserAvatar.vue

@@ -12,9 +12,11 @@
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
-import { uploadAvatar } from '@/api/system/user/profile'
+import { updateUserProfile } from '@/api/system/user/profile'
 import { CropperAvatar } from '@/components/Cropper'
 import { useUserStore } from '@/store/modules/user'
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { UploadRequestOptions } from 'element-plus/es/components/upload/src/upload'
 
 // TODO @芋艿：合并到 ProfileUser 组件中，更简洁一点
 defineOptions({ name: 'UserAvatar' })
@@ -27,10 +29,16 @@ const userStore = useUserStore()
 
 const cropperRef = ref()
 const handelUpload = async ({ data }) => {
-  // TODO @芋艿：去掉这个接口，使用 url 直接上传
-  const res = await uploadAvatar({ avatarFile: data })
+  const { httpRequest } = useUpload()
+  const avatar = ((await httpRequest({
+    file: data,
+    filename: 'avatar.png',
+  } as UploadRequestOptions)) as unknown as { data: string }).data
+  await updateUserProfile({ avatar })
+
+  // 关闭弹窗，并更新 userStore
   cropperRef.value.close()
-  userStore.setUserAvatarAction(res.data)
+  await userStore.setUserAvatarAction(avatar)
 }
 </script>