Files
zt-closet-wxmini-frontend/.codebuddy/plans/修复用户头像上传_a20a9901.md
T
2026-09-11 01:45:04 +08:00

2.9 KiB
Raw Blame History

name, overview, todos
name overview todos
修复用户头像上传 前端「编辑资料」头像选择当前只保存微信临时文件路径,未调用后端头像上传接口,导致头像不可用。修复为:选择头像后预览,保存时先调用 POST /user/avatar/upload 上传,再更新资料。
id content status
extend-upload-file 扩展 uploadFile 支持自定义上传 url(默认 /clothes/upload) completed
id content status dependencies
fix-avatar-save 重构 profile 保存流程:先上传头像再保存资料 completed
extend-upload-file
id content status dependencies
update-profile-ui 更新编辑弹窗上传中状态与禁用样式 completed
fix-avatar-save

修复头像上传与获取链路

产品概述

修复「我的」页面头像上传不可用问题,并一并修复头像获取链路的两处隐患(分享者头像 URL 转换、前端缓存时效),使头像上传与展示均正确且持久生效。

核心功能

  • 选择新头像后正常上传并持久保存,与昵称/性别/生日一并生效。
  • 分享场景分享者头像(owner_avatar)正确转换,不再生成错误 URL。
  • 前端头像展示不再因缓存过期签名 URL 而失效。

技术栈

  • 小程序:原生 TypeScript,复用 request / uploadFile。
  • 后端:Go,复用 pkg/upload 与既有 service 层。

实现方案

一、上传修复(前端)

  • utils/request.ts:uploadFile 增加可选 url 参数(默认 /clothes/upload),保持衣物上传调用方零改动。
  • pages/profile/profile.ts:新增 avatarUploading 状态;onSaveProfile 判断头像为临时路径(非 http:///https:// 开头)时,先调 /user/avatar/upload(字段名 file,响应 { avatar }),成功后再 PUT /user/profile(body 仅含 username/sex/birth_day,不含 avatar)。
  • pages/profile/profile.wxml + wxss:保存按钮在上传中显示「上传中…」并禁用。

二、后端头像 URL 转换统一

  • pkg/upload/upload.go:新增 AvatarURL(raw string) string——空串返回空;http:///https:// 开头直接透传;否则 GetCosUrl。
  • internal/service/user.go:buildUserInfoResponse 改用 upload.AvatarURL。
  • internal/service/closet.go:详情与列表两处 owner_avatar 改用 upload.AvatarURL,删除无条件 GetCosUrl。

三、前端缓存时效修复

  • pages/closet-share-create/closet-share-create.ts:onLoad 先读本地缓存兜底,再请求 /user/info 实时刷新昵称与头像并回写缓存(签名 URL 带 t 时间戳,缓存会过期)。

目录结构

  • 前端:miniprogram/utils/request.ts、pages/profile/{profile.ts,profile.wxml,profile.wxss}、pages/closet-share-create/closet-share-create.ts
  • 后端:pkg/upload/upload.go、internal/service/user.go、internal/service/closet.go