微信小程序使用腾讯云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', //id
  SecretKey: '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 → 提交用户信息修改