46 lines
2.9 KiB
Markdown
46 lines
2.9 KiB
Markdown
---
|
||
name: 修复头像上传临时路径误判
|
||
overview: 修复「我的」编辑头像保存不生效：微信 chooseAvatar 返回的临时路径以 http://tmp/ 开头，导致 onSaveProfile 的 startsWith('http://') 判断误判为已上传 URL 而跳过上传。改用 avatarChanged 标志位判断是否新选头像。
|
||
todos:
|
||
- id: fix-avatar-changed-flag
|
||
content: 修改 profile.ts：新增 avatarChanged 标志位并替换 onSaveProfile 的头像判断逻辑
|
||
status: 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`）时行为与原逻辑一致，直接保存昵称/性别/生日。 |