效果预览
核心技术（含业务逻辑）
选择新头像（本地图片）
使用 wx.chooseMedia 选择本地图片，官网见
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
将新头像上传到微信云存储
使用 wx.cloud.uploadFile 上传本地图片到微信云存储，官网见
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html
删除微信云存储中的旧头像
使用 wx.cloud.deleteFile 删除微信云存储中的文件，官网见
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/Cloud.deleteFile.html
将新头像在云存储中的地址存入云数据库
完整范例代码
<view class="avatarBox"> <t-avatar bindtap="chooseImg" data-url="{{userInfo.avatarUrl}}" wx:if="{{userInfo.avatarUrl}}" image="{{userInfo.avatarUrl}}" /> <t-avatar wx:else icon="user" /> </view>
.avatarBox { text-align: center; padding: 30rpx; }
选择新头像
chooseImg() { let that = this wx.chooseMedia({ count: 1, mediaType: ['image'], sourceType: ['album', 'camera'], camera: 'back', success(res) { let tempAvatar = res.tempFiles[0].tempFilePath that.setData({ 'userInfo.oldAvatarUrl': that.data.userInfo.avatarUrl, 'userInfo.avatarUrl': tempAvatar, 'userInfo.tempAvatar': tempAvatar, }) } }) },
上传保存新头像，删除旧头像
在点击保存时触发
// 保存更新用户信息 async save() { let nickname = this.data.userInfo.nickname if (!nickname) { wx.showToast({ icon: 'none', title: "昵称不能为空", }) return } wx.showLoading({ title: '保存中', }) let tempAvatar = this.data.userInfo.tempAvatar if (tempAvatar) { // 上传新头像 let { fileID } = await wx.cloud.uploadFile({ // 每次上传生成唯一的新文件名，以便触发云存储的缓存刷新 cloudPath: `avatar/${this.data.userInfo.No}_${Number(new Date())}.png`, filePath: tempAvatar, // 文件路径 }) // 删除旧头像 await wx.cloud.deleteFile({ fileList: [this.data.userInfo.oldAvatarUrl] }) // 用新头像在云存储中的地址，替代旧头像地址 this.setData({ 'userInfo.avatarUrl': fileID, }) } let id = this.data.userInfo._id // 对象深拷贝 let newData = JSON.parse(JSON.stringify(this.data.userInfo)) // 删除多余的表单字段 delete newData._openid delete newData._id wx.cloud.database().collection('user').doc(id).update({ data: { ...newData, updateTime: new Date() } }).then( res => { wx.hideLoading() // 更新全局的用户信息 wx.setStorageSync('userInfo', this.data.userInfo) wx.showToast({ icon: "success", title: `保存成功`, }) // 等待一会后跳转页面，否则无法看到保存成功的提示 setTimeout(() => { this.triggerEvent('showInfo') }, 1000) } ) },
