hookehuyr

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>
......