feat: profile avatar

src/api/base/profile.ts

@@ -1,3 +1,4 @@
+import { ContentTypeEnum } from '@/enums/httpEnum'
 import { defHttp } from '@/utils/http/axios'
 
 export interface ProfileDept {
@@ -86,7 +87,15 @@ export function updateUserPwdApi(oldPassword: string, newPassword: string) {
 
 // 用户头像上传
 export function uploadAvatarApi(data) {
-  return defHttp.put({ url: Api.uploadAvatarApi, data: { file: data } })
+  return defHttp.put({
+    url: Api.uploadAvatarApi,
+    headers: {
+      'Content-type': ContentTypeEnum.FORM_DATA,
+      // @ts-ignore
+      ignoreCancelToken: true
+    },
+    data
+  })
 }
 
 // 社交绑定，使用 code 授权码

src/components/Cropper/src/CopperModal.vue

@@ -158,16 +158,18 @@ function handlerToolbar(event: string, arg?: number) {
 
 async function handleOk() {
   const uploadApi = props.uploadApi
-  if (uploadApi && isFunction(uploadApi)) {
+  try {
+    setModalProps({ confirmLoading: true })
     const blob = dataURLtoBlob(previewSource.value)
-    try {
+    if (uploadApi && isFunction(uploadApi)) {
-      setModalProps({ confirmLoading: true })
       const result = await uploadApi({ name: 'file', file: blob, filename })
       emit('uploadSuccess', { source: previewSource.value, data: result.url })
-      closeModal()
+    } else {
-    } finally {
+      emit('uploadSuccess', { source: previewSource.value, data: blob, filename: filename })
-      setModalProps({ confirmLoading: false })
     }
+    closeModal()
+  } finally {
+    setModalProps({ confirmLoading: false })
   }
 }
 </script>

src/views/base/profile/BaseSetting.vue

@@ -9,7 +9,6 @@
           <div class="mb-2">头像</div>
           <CropperAvatar
             :value="avatar"
-            :uploadApi="uploadAvatarApi as any"
             btnText="更换头像"
             :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
             @change="updateAvatar"
@@ -52,10 +51,10 @@ const avatar = computed(() => {
   return avatar || headerImg
 })
 
-async function updateAvatar({ src, data }) {
+async function updateAvatar({ data }) {
-  await uploadAvatarApi({ avatarFile: data })
+  const res = await uploadAvatarApi({ avatarFile: data })
   const userinfo = userStore.getUserInfo
-  userinfo.user.avatar = src
+  userinfo.user.avatar = res
   userStore.setUserInfo(userinfo)
 }