微信小程序使用腾讯云COS SDK实现用户头像上传

• 引入与初始化COS SDK  （从官网下载cos-wx-sdk-v5.js文件，本地上传）

const COS = require('../../../static/utils/cos-wx-sdk-v5.js') as any;//实例化一个cos对象
const cos = new COS({SecretId: 'AK***********************VedSJ', //idSecretKey: 'qUy*************************K4bv2' //密钥
});

• 用户点击头像触发上传操作

  const handleAvatarClick = () => {popupType.value = 'avatar';entityList.value = categoryList.value;popup.value.open();
  };

  点击头像项时，打开底部弹窗，让用户选择是拍摄还是从相册选择

• 读取文件内容并上传至COS

const uploadToCOS = (filePath: string, key: string): Promise<string> => {return new Promise((resolve, reject) => {//读取本地文件数据uni.getFileSystemManager().readFile({filePath,success: (fileData) => {//调用方法上传对象到COS存储桶cos.putObject({Bucket: 'cs************387', //桶名称Region: 'ap-*****',   //地域Key: key,Body: fileData.data,ContentType: 'image/jpeg'}, (err: any, data: any) => {if (err) {reject(err);} else {resolve(`https://${data.Location}`);}});},fail: (err) => {reject(err);}});});
};

• 更新用户信息并提交修改

  uCenterInfo.icon_url = avatarUrl;
  await changeUserInfo();

  将上传成功后的头像地址avatarUrl设置到uCenterInfo.icon_url，调用changeUserInfo()方法将更新后的用户信息提交到后端服务。

• 错误处理

catch (error) {uni.showToast({ title: '上传失败', icon: 'none' });console.error('上传失败:', error);
}

• 总结COS上传完整流程图解

  点击头像 → 打开弹窗选择“从相册选择”↓
  调用 uni.chooseImage → 获取临时文件路径↓
  构造唯一文件名 → 准备上传到 COS↓
  调用 uni.getFileSystemManager().readFile → 读取文件二进制数据↓
  调用 cos.putObject → 上传到腾讯云 COS↓
  上传成功 → 获取 CDN 访问链接↓
  更新 uCenterInfo.icon_url → 提交用户信息修改