update 重构 头像上传改为先上传oss后更新用户数据

src/api/system/oss/index.ts

@@ -1,7 +1,7 @@
 import type { PageResult } from '@/api/types';
 import type { AxiosPromise } from '@/utils/api-types';
 import request from '@/utils/request';
-import type { OssQuery, OssVO } from './types';
+import type { OssQuery, OssUploadVO, OssVO } from './types';
 
 // 查询OSS对象存储列表
 export function listOss(query: OssQuery): AxiosPromise<PageResult<OssVO>> {
@@ -20,6 +20,15 @@ export function listByIds(ossId: string | number): AxiosPromise<OssVO[]> {
   });
 }
 
+// 上传OSS对象存储
+export function uploadOss(data: FormData): AxiosPromise<OssUploadVO> {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data
+  });
+}
+
 // 删除OSS对象存储
 export function delOss(ossId: string | number | Array<string | number>) {
   return request({

src/api/system/oss/types.ts

@@ -8,6 +8,12 @@ export interface OssVO extends BaseEntity {
   service: string;
 }
 
+export interface OssUploadVO {
+  url: string;
+  fileName: string;
+  ossId: string;
+}
+
 export interface OssQuery extends PageQuery {
   fileName: string;
   originalName: string;

src/api/system/user/index.ts

@@ -4,7 +4,7 @@ import type { AxiosPromise } from '@/utils/api-types';
 import request from '@/utils/request';
 import { parseStrEmpty } from '@/utils/ruoyi';
 import type { DeptTreeVO } from './../dept/types';
-import type { UserForm, UserInfoVO, UserQuery, UserVO } from './types';
+import type { UserForm, UserInfoVO, UserProfileForm, UserQuery, UserVO } from './types';
 
 /**
  * 查询用户列表
@@ -136,7 +136,7 @@ export const getUserProfile = (): AxiosPromise<UserInfoVO> => {
  * 修改用户个人信息
  * @param data 用户信息
  */
-export const updateUserProfile = (data: UserForm) => {
+export const updateUserProfile = (data: UserProfileForm) => {
   return request({
     url: '/system/user/profile',
     method: 'put',
@@ -165,18 +165,6 @@ export const updateUserPwd = (oldPassword: string, newPassword: string) => {
   });
 };
 
-/**
- * 用户头像上传
- * @param data 头像文件
- */
-export const uploadAvatar = (data: FormData) => {
-  return request({
-    url: '/system/user/profile/avatar',
-    method: 'post',
-    data: data
-  });
-};
-
 /**
  * 查询授权角色
  * @param userId 用户ID
@@ -234,7 +222,6 @@ export default {
   getUserProfile,
   updateUserProfile,
   updateUserPwd,
-  uploadAvatar,
   getAuthRole,
   updateAuthRole,
   deptTreeSelect,

src/api/system/user/types.ts

@@ -71,6 +71,17 @@ export interface UserForm {
   roleIds: string[];
 }
 
+/**
+ * 个人资料表单类型
+ */
+export interface UserProfileForm {
+  nickName?: string;
+  phoneNumber?: string;
+  email?: string;
+  gender?: string;
+  avatar?: string | number;
+}
+
 export interface UserInfoVO {
   user: UserVO;
   roles: RoleVO[];

src/views/system/user/profile/userAvatar.vue

@@ -59,7 +59,8 @@
 import 'vue-cropper/dist/index.css';
 import { UploadRawFile } from 'element-plus';
 import { VueCropper } from 'vue-cropper';
-import { uploadAvatar } from '@/api/system/user';
+import { uploadOss } from '@/api/system/oss';
+import { updateUserProfile } from '@/api/system/user';
 import modal from '@/plugins/modal';
 import { useUserStore } from '@/store/modules/user';
 
@@ -135,10 +136,11 @@ const beforeUpload = (file: UploadRawFile): any => {
 const uploadImg = async () => {
   cropper.value.getCropBlob(async (data: any) => {
     const formData = new FormData();
-    formData.append('avatarfile', data, options.fileName);
+    formData.append('file', data, options.fileName || 'avatar.png');
-    const res = await uploadAvatar(formData);
+    const res = await uploadOss(formData);
+    await updateUserProfile({ avatar: res.data.ossId });
     open.value = false;
-    options.img = res.data.imgUrl;
+    options.img = res.data.url;
     userStore.setAvatar(options.img);
     modal.msgSuccess('修改成功');
     visible.value = false;

src/views/system/user/profile/userInfo.vue

@@ -25,6 +25,7 @@
 
 <script setup lang="ts">
 import { updateUserProfile } from '@/api/system/user';
+import type { UserProfileForm } from '@/api/system/user/types';
 import modal from '@/plugins/modal';
 import tab from '@/plugins/tab';
 import { useDict } from '@/utils/dict';
@@ -65,7 +66,13 @@ const rules = ref<ElFormRules>(rule);
 const submit = () => {
   userRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      await updateUserProfile(props.user);
+      const profile: UserProfileForm = {
+        nickName: props.user.nickName,
+        phoneNumber: props.user.phoneNumber,
+        email: props.user.email,
+        gender: props.user.gender
+      };
+      await updateUserProfile(profile);
       modal.msgSuccess('修改成功');
     }
   });