# 头像上传功能说明

## 功能概述
本功能允许用户上传和更换个人头像，支持从相册选择或拍照两种方式。

## 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. 文件类型验证