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

Nueuis2025-05-09 9:21

引入与初始化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 => {
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 → 提交用户信息修改