Files
zt-closet-wxmini-frontend/.codebuddy/plans/修复头像上传临时路径误判_7af3c896.md
2026-09-11 01:45:04 +08:00

2.9 KiB
Raw Permalink Blame History

name, overview, todos
name overview todos
修复头像上传临时路径误判 修复「我的」编辑头像保存不生效:微信 chooseAvatar 返回的临时路径以 http://tmp/ 开头,导致 onSaveProfile 的 startsWith('http://') 判断误判为已上传 URL 而跳过上传。改用 avatarChanged 标志位判断是否新选头像。
id content status
fix-avatar-changed-flag 修改 profile.ts:新增 avatarChanged 标志位并替换 onSaveProfile 的头像判断逻辑 completed

产品概述

修复「我的」页面编辑资料时头像上传后保存不生效的问题,使选择的新头像能正常上传到服务端并持久保存。

核心功能

  • 用户在编辑资料弹窗中选择新头像后,点击保存能正确触发头像上传。
  • 头像上传成功后与昵称、性别、生日一并保存,刷新后头像正确展示。
  • 未选择新头像时仍保持原有头像,不重复上传。

根因

<button open-type="chooseAvatar"> 返回的 avatarUrl 是微信本地临时文件路径,格式以 http://tmp/ 开头。原 onSaveProfile 用「非 http:///https:// 开头」判断是否为临时头像,导致 http://tmp/ 开头的临时路径被误判为已上传 URL,从而跳过 /user/avatar/upload 上传,头像既未上传也未保存。

技术栈

  • 平台:微信小程序原生 TypeScript,沿用现有架构。
  • 网络层:复用 miniprogram/utils/request.ts 的 request<T> 与 uploadFile<T>。
  • 后端接口:复用已就绪的 POST /user/avatar/upload(multipart,字段名 file,响应 { avatar }),本次无需改动。

实现方案

用「本次编辑是否新选了头像」的标志位 avatarChanged 替代 URL 前缀判断,从根本上规避微信临时路径 http://tmp/ 开头造成的误判。

关键改动(仅 miniprogram/pages/profile/profile.ts)

  1. data 新增 avatarChanged: false。
  2. onEdit 打开编辑弹窗时重置 avatarChanged: false,保证每次打开都是干净状态。
  3. onChooseAvatar 在写入 editForm.avatar 的同时置 avatarChanged: true。
  4. onSaveProfile 删除 startsWith('http://')/startsWith('https://') 判断,改为 if (this.data.avatarChanged && avatar) 才先调用 uploadFile(avatar, 'file', '/user/avatar/upload') 上传;上传成功后再 PUT /user/profile(body 仅含 username/sex/birth_day,不含 avatar,避免持久化带签名的临时 URL)。
  5. 保留 avatarUploading 防重复提交与失败复位逻辑不变。

实现注意事项

  • 上传成功后仅依赖 /user/avatar/upload 后端写入 users.avatar,前端不把上传返回的 URL 写回 /user/profile,与上一轮设计保持一致。
  • avatarChanged 只用于「是否上传」,上传完成后无需复位为 false(弹窗随即关闭;下次打开由 onEdit 重置)。
  • 兼容性:未选头像(avatarChanged=false)时行为与原逻辑一致,直接保存昵称/性别/生日。