feat: 图片裁剪组件 & 头像上传

apps/web-antd/src/api/system/profile/index.ts

@@ -1,6 +1,7 @@
-import type { UpdatePasswordParam, UserProfile } from './model';
+import type { FileCallBack, UpdatePasswordParam, UserProfile } from './model';
 
 import { requestClient } from '#/api/request';
+import { buildUUID } from '#/utils/uuid';
 
 enum Api {
   root = '/system/user/profile',
@@ -35,3 +36,29 @@ export function userUpdatePassword(data: UpdatePasswordParam) {
     encrypt: true,
   });
 }
+
+/**
+ * 用户更新个人头像
+ * @param fileCallback data
+ * @returns void
+ */
+export function userUpdateAvatar(fileCallback: FileCallBack) {
+  /** 直接点击头像上传 filename为空 由于后台通过拓展名判断(默认文件名blob) 会上传失败 */
+  let { file } = fileCallback;
+  const { filename } = fileCallback;
+  /**
+   * Blob转File类型
+   * 1. 在直接点击确认 filename为空 取uuid作为文件名
+   * 2. 选择上传必须转为File类型 Blob类型上传后台获取文件名为空
+   */
+  file = filename
+    ? new File([file], filename)
+    : new File([file], `${buildUUID()}.png`);
+  return requestClient.post(
+    Api.updateAvatar,
+    {
+      avatarfile: file,
+    },
+    { headers: { 'Content-Type': 'multipart/form-data' } },
+  );
+}

apps/web-antd/src/api/system/profile/model.d.ts

@@ -67,3 +67,9 @@ export interface UpdatePasswordParam {
   oldPassword: string;
   newPassword: string;
 }
+
+interface FileCallBack {
+  name: string;
+  file: Blob;
+  filename: string;
+}