feat(头像设置): 实现七牛云头像上传功能并添加MD5校验

- 新增七牛云上传相关API调用和MD5文件校验功能
- 优化头像上传流程，先检查文件是否已存在
- 使用vant组件显示上传状态提示
- 根据协议自动选择七牛云上传地址
- 添加文件信息保存逻辑

 <!--
  * @Date: 2025-03-24 13:04:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-26 13:27:45
+ * @LastEditTime: 2025-06-06 11:22:30
  * @FilePath: /mlaj/src/views/profile/settings/AvatarSettingPage.vue
  * @Description: 修改头像页面
 -->
@@ -55,10 +55,14 @@ import { ref, onMounted } from "vue";
 import AppLayout from "@/components/layout/AppLayout.vue";
 import FrostedGlass from "@/components/ui/FrostedGlass.vue";
 import { getUserInfoAPI, updateUserInfoAPI } from "@/api/users";
-
+import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common';
+import { showToast, showLoadingToast } from 'vant';
+import BMF from 'browser-md5-file';
 import { useTitle } from '@vueuse/core';
+import { useAuth } from '@/contexts/auth';
 
 const $route = useRoute();
+const { currentUser } = useAuth();
 useTitle($route.meta.title);
 
 
@@ -77,20 +81,99 @@ onMounted(async () => {
   }
 });
 
+// 获取文件MD5
+const getFileMD5 = (file) => {
+  return new Promise((resolve, reject) => {
+    const bmf = new BMF()
+    bmf.md5(file, (err, md5) => {
+      if (err) {
+        reject(err)
+        return
+      }
+      resolve(md5)
+    })
+  })
+}
+
+// 上传到七牛云
+const uploadToQiniu = async (file, token, fileName) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('token', token)
+  formData.append('key', fileName)
+
+  const config = {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  }
+
+  // 根据协议选择上传地址
+  const qiniuUploadUrl = window.location.protocol === 'https:'
+    ? 'https://up.qbox.me'
+    : 'http://upload.qiniu.com'
+
+  return await qiniuUploadAPI(qiniuUploadUrl, formData, config)
+}
+
 // 处理头像上传
 const handleAvatarChange = async (file) => {
+  // const toast = showLoadingToast({
+  //   message: '上传中...',
+  //   forbidClick: true,
+  // });
+
   try {
-    const formData = new FormData();
-    formData.append("avatar", file);
+    // 获取MD5值
+    const md5 = await getFileMD5(file.file)
 
-    const response = await updateUserInfoAPI(formData);
-    if (response.data) {
-      userAvatar.value = response.data.url;
-      alert("头像上传成功");
+    // 获取七牛token
+    const tokenResult = await qiniuTokenAPI({
+      name: file.file.name,
+      hash: md5
+    })
+
+    // 文件已存在，直接使用
+    if (tokenResult.data) {
+      userAvatar.value = tokenResult.data.src;
+      // 更新用户信息
+      await updateUserInfoAPI({ avatar: tokenResult.data.src });
+      showToast('头像上传成功');
+      return;
+    }
+
+    // 新文件上传
+    if (tokenResult.token) {
+      const suffix = /.[^.]+$/.exec(file.file.name) || ''
+      const fileName = `mlaj/upload/avatar/${currentUser.value.mobile}/${md5}${suffix}`
+
+      const { filekey, image_info } = await uploadToQiniu(
+        file.file,
+        tokenResult.token,
+        fileName
+      )
+
+      if (filekey) {
+        // 保存文件信息
+        const { data } = await saveFileAPI({
+          name: file.file.name,
+          filekey,
+          hash: md5,
+          height: image_info?.height,
+          width: image_info?.width
+        })
+
+        if (data) {
+          userAvatar.value = data.src;
+          // 更新用户信息
+          await updateUserInfoAPI({ avatar: data.src });
+          showToast('头像上传成功');
+        }
+      }
     }
   } catch (error) {
-    console.error("头像上传失败:", error);
-    alert("头像上传失败，请重试");
+    console.error('头像上传失败:', error)
+    showToast('头像上传失败，请重试')
+  } finally {
+    // toast.close();
   }
 };
 </script>