当前位置：首页 > news >正文

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

news 来源：原创 2025/5/9 7:45:11

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