hookehuyr

fix(avatar): 修复头像上传功能并简化流程

- 修复 src/api/common.js 中 Taro 未定义的错误
- 改用 Taro.uploadFile 直接上传到服务器
- 添加图片审核支持和样式修复
- 更新 CHANGELOG.md

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -50,6 +50,31 @@
---
## [2026-02-03] - 修复头像上传功能
### 修复
- 修复 `src/api/common.js``Taro is not defined` 错误
- 添加 `import Taro from '@tarojs/taro'` 导入语句
- 影响:src/api/common.js
- 简化头像上传流程,改用 `Taro.uploadFile` 直接上传到服务器
- 移除七牛云上传流程,改用直接上传
- 添加图片审核支持(image_audit=1)
- 修复头像显示样式(object-fit: cover)
- 影响:src/pages/avatar/index.vue
---
**详细信息**
- **影响文件**: src/api/common.js, src/pages/avatar/index.vue
- **技术栈**: Taro 4.x, Vue 3
- **测试状态**: ✅ 已通过
- **备注**:
- 上传流程:选择图片 → Taro.uploadFile 直接上传到服务器 → 保存头像 URL
- 支持图片大小限制(5MB)
- 支持图片审核,审核不通过时提示用户
---
## [2026-02-03] - 新增头像修改页面接口记录
### 文档
......
......@@ -5,6 +5,7 @@
* @FilePath: /tswj/src/api/common.js
* @Description: 通用接口
*/
import Taro from '@tarojs/taro'
import { fn, fetch, uploadFn } from '@/api/fn';
const Api = {
......
......@@ -13,7 +13,7 @@
<view class="flex-1 flex flex-col items-center pt-[120rpx]">
<view class="relative mb-[60rpx]" @tap="onChangeAvatar">
<nut-avatar size="large" class="!w-[240rpx] !h-[240rpx] shadow-lg border-4 border-gray-100">
<img :src="avatarUrl" />
<img :src="avatarUrl" style="object-fit: cover; width: 100%; height: 100%;" />
</nut-avatar>
<view class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black/30 rounded-full p-[16rpx]">
<IconFont name="photograph" color="#fff" size="24" />
......@@ -40,16 +40,15 @@ import IconFont from '@/components/IconFont.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
import defaultAvatar from '@/assets/images/icon/avatar.svg'
import { uploadImageToQiniuAPI } from '@/api/common'
import { updateProfileAPI } from '@/api/user'
import BASE_URL from '@/utils/config'
const go = useGo()
const avatarUrl = ref(defaultAvatar)
const tempAvatarUrl = ref('') // 临时存储上传后的头像URL
const uploading = ref(false) // 上传状态
/**
* @description 更换头像
* @description 更换头像(参考老来赛项目,直接上传到服务器)
*/
const onChangeAvatar = () => {
Taro.chooseImage({
......@@ -70,40 +69,49 @@ const onChangeAvatar = () => {
// 显示上传进度
Taro.showLoading({ title: '上传中...', mask: true })
uploading.value = true
try {
// 上传到七牛云
const uploadRes = await uploadImageToQiniuAPI({
filePath: tempFile.path
})
Taro.hideLoading()
uploading.value = false
if (uploadRes.code === 1) {
// 上传成功,更新头像显示
avatarUrl.value = uploadRes.data.src
tempAvatarUrl.value = uploadRes.data.src
Taro.showToast({
title: '上传成功',
icon: 'success'
})
} else {
// 参考老来赛:直接用 Taro.uploadFile 上传到服务器
Taro.uploadFile({
url: BASE_URL + '/admin/?m=srv&a=upload&image_audit=1',
filePath: tempFile.path,
name: 'file',
success: (uploadRes) => {
Taro.hideLoading()
const data = JSON.parse(uploadRes.data)
// 检查是否为审核不通过
if (data.data && data.data.audit_code == -1) {
Taro.showModal({
title: '温馨提示',
content: data.msg || '图片审核不通过',
showCancel: false
})
return
}
if (data.code === 0) { // 注意:老来赛后端 code=0 表示成功
avatarUrl.value = data.data.src
tempAvatarUrl.value = data.data.src
Taro.showToast({
title: '上传成功',
icon: 'success'
})
} else {
Taro.showToast({
title: data.msg || '上传失败',
icon: 'none'
})
}
},
fail: () => {
Taro.hideLoading()
Taro.showToast({
title: uploadRes.msg || '上传失败',
title: '上传失败,请稍后重试',
icon: 'none'
})
}
} catch (err) {
Taro.hideLoading()
uploading.value = false
console.error('上传头像失败:', err)
Taro.showToast({
title: '上传失败,请稍后重试',
icon: 'none'
})
}
})
}
})
}
......