163 lines
4.2 KiB
Markdown
163 lines
4.2 KiB
Markdown
# 头像上传功能说明
|
||
|
||
## 功能概述
|
||
本功能允许用户上传和更换个人头像，支持从相册选择或拍照两种方式。
|
||
|
||
## API接口
|
||
- **接口地址**: `PUT /app/user/avatar`
|
||
- **请求格式**: `form-data`
|
||
- **参数名**: `avatarfile`
|
||
- **参数类型**: `file`
|
||
|
||
## 实现文件
|
||
1. **API函数**: `api/user/user.js` - `uploadAvatar()`
|
||
2. **页面组件**: `pages/set/set.vue` - 头像设置页面
|
||
3. **请求工具**: `utils/request.js` - 统一请求处理（包含文件上传方法）
|
||
|
||
## 使用流程
|
||
|
||
### 1. 用户操作流程
|
||
1. 进入设置页面 (`pages/set/set.vue`)
|
||
2. 点击"头像"设置项
|
||
3. 选择"从相册选择"或"拍照"
|
||
4. 选择或拍摄图片
|
||
5. 系统自动上传并更新头像
|
||
|
||
### 2. 技术实现流程
|
||
1. **选择图片**: 使用 `uni.chooseImage()` 选择图片
|
||
2. **上传文件**: 使用 `utils/request.js` 中的 `uploadFile()` 方法上传到服务器
|
||
3. **更新显示**: 更新本地存储和页面显示
|
||
4. **通知更新**: 通过事件通知其他页面更新头像
|
||
|
||
## 关键代码
|
||
|
||
### 统一文件上传方法 (utils/request.js)
|
||
```javascript
|
||
export function uploadFile(url, filePath, name = 'file', formData = {}, options = {}) {
|
||
// 自动获取token和配置
|
||
// 统一错误处理
|
||
// 支持超时设置
|
||
// 自动解析响应
|
||
}
|
||
```
|
||
|
||
### API函数 (api/user/user.js)
|
||
```javascript
|
||
export function uploadAvatar(filePath) {
|
||
return uploadFile('/app/user/avatar', filePath, 'avatarfile', {}, {
|
||
timeout: 60000
|
||
}).then(data => {
|
||
// 更新本地存储
|
||
// 通知其他页面
|
||
return data
|
||
})
|
||
}
|
||
```
|
||
|
||
### 页面方法 (pages/set/set.vue)
|
||
```javascript
|
||
// 显示头像选择器
|
||
showAvatarPicker() {
|
||
uni.showActionSheet({
|
||
itemList: ['从相册选择', '拍照'],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
this.chooseImage('album')
|
||
} else if (res.tapIndex === 1) {
|
||
this.chooseImage('camera')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 选择图片
|
||
chooseImage(sourceType) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: [sourceType],
|
||
success: (res) => {
|
||
this.uploadAvatarFile(res.tempFilePaths[0])
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
## 技术优势
|
||
|
||
### 1. 统一请求管理
|
||
- ✅ 使用 `utils/request.js` 中的 `uploadFile()` 方法
|
||
- ✅ 自动获取token和配置
|
||
- ✅ 统一的错误处理和响应解析
|
||
- ✅ 支持超时设置和自定义配置
|
||
|
||
### 2. 简化API调用
|
||
- ✅ API函数代码更简洁
|
||
- ✅ 专注于业务逻辑处理
|
||
- ✅ 自动处理token和认证
|
||
- ✅ 统一的错误处理机制
|
||
|
||
### 3. 更好的维护性
|
||
- ✅ 所有网络请求都通过统一的工具管理
|
||
- ✅ 配置变更只需修改一处
|
||
- ✅ 错误处理逻辑统一
|
||
- ✅ 便于调试和监控
|
||
|
||
## 权限配置
|
||
|
||
### Android权限
|
||
已在 `manifest.json` 中添加：
|
||
- `READ_EXTERNAL_STORAGE` - 读取外部存储
|
||
- `WRITE_EXTERNAL_STORAGE` - 写入外部存储
|
||
- `CAMERA` - 相机权限
|
||
|
||
### 微信小程序权限
|
||
建议在 `manifest.json` 中添加：
|
||
```json
|
||
"permission": {
|
||
"scope.writePhotosAlbum": {
|
||
"desc": "用于保存头像图片"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 测试方法
|
||
|
||
### 1. 功能测试
|
||
1. 点击设置页面的头像设置项
|
||
2. 选择一张图片
|
||
3. 查看控制台日志确认上传过程
|
||
4. 验证头像是否成功更新
|
||
|
||
### 2. 调试信息
|
||
- 控制台会输出详细的请求和响应日志
|
||
- 包括文件路径、请求头、响应数据等信息
|
||
- 统一的错误处理和提示
|
||
|
||
## 注意事项
|
||
|
||
1. **文件大小**: 建议限制上传文件大小，避免过大文件影响性能
|
||
2. **文件格式**: 建议只允许图片格式（jpg, png, gif等）
|
||
3. **网络处理**: 已添加超时和错误处理机制
|
||
4. **权限检查**: 在Android和iOS上需要相应的存储和相机权限
|
||
5. **响应格式**: 服务器应返回标准的JSON响应格式
|
||
|
||
## 错误处理
|
||
|
||
常见错误及解决方案：
|
||
- **网络错误**: 检查网络连接和服务器状态
|
||
- **权限错误**: 确保已授予存储和相机权限
|
||
- **文件格式错误**: 确保上传的是有效的图片文件
|
||
- **服务器错误**: 检查服务器端接口是否正常工作
|
||
- **Token错误**: 确保用户已登录且token有效
|
||
|
||
## 扩展功能
|
||
|
||
可以考虑添加的功能：
|
||
1. 图片压缩和裁剪
|
||
2. 上传进度显示
|
||
3. 多图片上传
|
||
4. 图片预览功能
|
||
5. 上传历史记录
|
||
6. 断点续传
|
||
7. 文件类型验证 |