HomeLease/README_AVATAR_UPLOAD.md

头像上传功能说明

功能概述

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

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)

export function uploadFile(url, filePath, name = 'file', formData = {}, options = {}) {
  // 自动获取token和配置
  // 统一错误处理
  // 支持超时设置
  // 自动解析响应
}

API函数 (api/user/user.js)

export function uploadAvatar(filePath) {
  return uploadFile('/app/user/avatar', filePath, 'avatarfile', {}, {
    timeout: 60000
  }).then(data => {
    // 更新本地存储
    // 通知其他页面
    return data
  })
}

页面方法 (pages/set/set.vue)

// 显示头像选择器
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 中添加：

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