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

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

Author: YunaiV

src/api/system/user/profile.ts

@@ -32,10 +32,11 @@ export interface ProfileVO {
 }
 
 export interface UserProfileUpdateReqVO {
-  nickname: string
-  email: string
-  mobile: string
-  sex: number
+  nickname?: string
+  email?: string
+  mobile?: string
+  sex?: number
+  avatar?: string
 }
 
 // 查询用户个人信息
@@ -58,8 +59,3 @@ export const updateUserPassword = (oldPassword: string, newPassword: string) =>
     }
   })
 }
-
-// 用户头像上传
-export const uploadAvatar = (data) => {
-  return request.upload({ url: '/system/user/profile/update-avatar', data: data })
-}

src/components/Cropper/src/CopperModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @click.stop>
     <Dialog
       v-model="dialogVisible"
       :canFullscreen="false"
@@ -181,6 +181,7 @@ function openModal() {
 }
 
 function closeModal() {
+  debugger
   dialogVisible.value = false
 }
 

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>