180 lines
3.9 KiB
Markdown
180 lines
3.9 KiB
Markdown
|
# 个人资料头像上传功能完成
|
|||
|
|
|
|||
|
|
## ✅ 已完成的工作
|
|||
|
|
|
|||
|
|
### 1. 后端头像上传接口
|
|||
|
|
**文件**: `peidu/backend/src/main/java/com/peidu/controller/UserController.java`
|
|||
|
|
|
|||
|
|
**新增接口**:
|
|||
|
|
```java
|
|||
|
|
POST /api/user/upload-avatar
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**功能特性**:
|
|||
|
|
- ✅ 文件类型验证（只允许图片）
|
|||
|
|
- ✅ 文件大小验证（最大5MB）
|
|||
|
|
- ✅ 使用项目已有的 `FileUploadService` 上传文件
|
|||
|
|
- ✅ 自动更新用户头像字段
|
|||
|
|
- ✅ 详细的日志输出
|
|||
|
|
- ✅ 完善的错误处理
|
|||
|
|
|
|||
|
|
**关键代码**:
|
|||
|
|
```java
|
|||
|
|
@ApiOperation("上传头像")
|
|||
|
|
@PostMapping("/upload-avatar")
|
|||
|
|
public Result<String> uploadAvatar(@CurrentUser Long userId,
|
|||
|
|
@RequestParam("file") MultipartFile file) {
|
|||
|
|
// 1. 验证文件类型和大小
|
|||
|
|
// 2. 使用FileUploadService上传
|
|||
|
|
// 3. 更新用户头像字段
|
|||
|
|
// 4. 返回文件URL
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 更新个人资料接口优化
|
|||
|
|
**修改**: 添加了 `region` 字段的更新支持
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
if (updateUser.getRegion() != null) {
|
|||
|
|
user.setRegion(updateUser.getRegion());
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 前端已完成
|
|||
|
|
**文件**: `peidu/uniapp/src/user-package/pages/user/profile.vue`
|
|||
|
|
|
|||
|
|
前端功能已在之前完成:
|
|||
|
|
- ✅ 头像选择（相册/相机）
|
|||
|
|
- ✅ 文件上传到服务器
|
|||
|
|
- ✅ 上传成功后更新显示
|
|||
|
|
- ✅ 生日选择功能
|
|||
|
|
- ✅ 性别选择功能
|
|||
|
|
- ✅ 昵称修改功能
|
|||
|
|
- ✅ 保存修改功能
|
|||
|
|
|
|||
|
|
## 🔧 技术实现
|
|||
|
|
|
|||
|
|
### 文件上传流程
|
|||
|
|
```
|
|||
|
|
前端 uni.chooseImage
|
|||
|
|
↓
|
|||
|
|
前端 uni.uploadFile
|
|||
|
|
↓
|
|||
|
|
后端 /api/user/upload-avatar
|
|||
|
|
↓
|
|||
|
|
FileUploadService.uploadFile()
|
|||
|
|
↓
|
|||
|
|
根据配置选择本地/远程存储
|
|||
|
|
↓
|
|||
|
|
返回文件URL
|
|||
|
|
↓
|
|||
|
|
更新 user.avatar 字段
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### FileUploadService 说明
|
|||
|
|
项目中已有完善的文件上传服务:
|
|||
|
|
- 支持本地存储模式
|
|||
|
|
- 支持远程上传模式（可配置）
|
|||
|
|
- 自动生成唯一文件名
|
|||
|
|
- 返回可访问的URL
|
|||
|
|
|
|||
|
|
## 📝 测试步骤
|
|||
|
|
|
|||
|
|
### 1. 重启后端
|
|||
|
|
```bash
|
|||
|
|
cd peidu/backend
|
|||
|
|
# 停止当前服务（Ctrl+C）
|
|||
|
|
mvn spring-boot:run
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 测试头像上传
|
|||
|
|
1. 打开小程序
|
|||
|
|
2. 进入"个人资料"页面
|
|||
|
|
3. 点击头像
|
|||
|
|
4. 选择图片（相册或相机）
|
|||
|
|
5. 等待上传完成
|
|||
|
|
6. 查看头像是否更新
|
|||
|
|
7. 点击"保存修改"
|
|||
|
|
8. 返回上一页，验证头像是否保存
|
|||
|
|
|
|||
|
|
### 3. 测试其他功能
|
|||
|
|
- 修改昵称
|
|||
|
|
- 选择性别
|
|||
|
|
- 输入生日
|
|||
|
|
- 保存修改
|
|||
|
|
|
|||
|
|
## 🎯 完整功能清单
|
|||
|
|
|
|||
|
|
### ✅ 已完成
|
|||
|
|
1. **头像上传** - 完整实现（前端+后端）
|
|||
|
|
2. **生日选择** - 输入框实现
|
|||
|
|
3. **性别选择** - 下拉选择
|
|||
|
|
4. **昵称修改** - 弹窗输入
|
|||
|
|
5. **保存修改** - 调用API保存
|
|||
|
|
|
|||
|
|
### ⚠️ 待完善
|
|||
|
|
1. **地区选择** - 显示"功能开发中"
|
|||
|
|
2. **实名认证** - 显示"功能开发中"
|
|||
|
|
3. **生日选择器优化** - 可改为日期选择器组件
|
|||
|
|
|
|||
|
|
## 📋 API文档
|
|||
|
|
|
|||
|
|
### 上传头像
|
|||
|
|
```
|
|||
|
|
POST /api/user/upload-avatar
|
|||
|
|
Content-Type: multipart/form-data
|
|||
|
|
|
|||
|
|
参数:
|
|||
|
|
- file: 图片文件（必填）
|
|||
|
|
|
|||
|
|
响应:
|
|||
|
|
{
|
|||
|
|
"code": 200,
|
|||
|
|
"message": "success",
|
|||
|
|
"data": "http://xxx/uploads/avatar/xxx.jpg"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 更新个人资料
|
|||
|
|
```
|
|||
|
|
PUT /api/user/profile
|
|||
|
|
Content-Type: application/json
|
|||
|
|
|
|||
|
|
参数:
|
|||
|
|
{
|
|||
|
|
"nickname": "昵称",
|
|||
|
|
"gender": 1, // 1=男, 2=女
|
|||
|
|
"birthday": "2000-01-01",
|
|||
|
|
"avatar": "http://xxx/avatar.jpg",
|
|||
|
|
"region": "广东省深圳市"
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
响应:
|
|||
|
|
{
|
|||
|
|
"code": 200,
|
|||
|
|
"message": "success",
|
|||
|
|
"data": true
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## ⚠️ 注意事项
|
|||
|
|
|
|||
|
|
1. **文件大小限制**: 最大5MB
|
|||
|
|
2. **文件类型限制**: 只允许图片（image/*）
|
|||
|
|
3. **存储配置**: 根据 `FileUploadConfig` 配置决定本地/远程存储
|
|||
|
|
4. **URL格式**: 返回的URL需要能被前端访问
|
|||
|
|
|
|||
|
|
## 🚀 后续优化建议
|
|||
|
|
|
|||
|
|
1. **图片压缩**: 上传前压缩图片，减少流量
|
|||
|
|
2. **图片裁剪**: 添加裁剪功能，支持缩放和旋转
|
|||
|
|
3. **生日选择器**: 使用更友好的日期选择组件
|
|||
|
|
4. **地区选择**: 实现省市区三级联动
|
|||
|
|
5. **实名认证**: 对接第三方实名认证API
|
|||
|
|
|
|||
|
|
## 📅 完成时间
|
|||
|
|
2026-01-28
|
|||
|
|
|
|||
|
|
## 👤 开发人员
|
|||
|
|
Kiro AI Assistant
|