【微信小程序-原生开发+云开发+TDesign】修改用户头像（含wx.chooseMedia，wx.cloud.uploadFile，wx.cloud.deleteFile的使用）

效果预览

核心技术（含业务逻辑）

选择新头像（本地图片）
使用 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 = thiswx.chooseMedia({count: 1,mediaType: ['image'],sourceType: ['album', 'camera'],camera: 'back',success(res) {let tempAvatar = res.tempFiles[0].tempFilePaththat.setData({'userInfo.oldAvatarUrl': that.data.userInfo.avatarUrl,'userInfo.avatarUrl': tempAvatar,'userInfo.tempAvatar': tempAvatar,})}})},

上传保存新头像，删除旧头像

在点击保存时触发

    // 保存更新用户信息async save() {let nickname = this.data.userInfo.nicknameif (!nickname) {wx.showToast({icon: 'none',title: "昵称不能为空",})return}wx.showLoading({title: '保存中',})let tempAvatar = this.data.userInfo.tempAvatarif (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._openiddelete newData._idwx.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)})},

【微信小程序-原生开发+云开发+TDesign】修改用户头像（含wx.chooseMedia，wx.cloud.uploadFile，wx.cloud.deleteFile的使用）相关推荐

微信小程序：uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错该小程序还有外卖系 ...
微信小程序中配置云开发
微信小程序中配置云开发一.配置 app.js 文件 onLaunch() {wx.cloud.init({env: 'cloud1-xxxxxxxxxx', // 云开发环境IDtraceUser ...
微信小程序：(更新)云开发微群人脉
大家好,今天给大家带来的这一款是经过优化更新并有所改动的一个版本我们之前也发布过一款,今天这一款是在之前的哪一款的基础下增加优化该小程序的群码都是系统自动采集的,所以没有上线但是没有群的烦恼另外 ...
仿京细菜谱微信小程序源码云开发菜谱微信小程序源码
京细菜谱是一个美食分享网站,提供优质的家常菜谱大全,仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程让您轻松学会做美食.对不同食材和地域的饮食做了不同的分类和详细的做菜方法分类十分详细 ...
微信小程序---快速上手云开发
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
Mpvue+koa开发微信小程序——腾讯云开发环境的搭建及部署实现真机测试
为什么写这篇文章? 之前写过一篇文章:微信小程序开发错误:LoginError {type: "ERR_WX_GET_USER_INFO"}解决方法有的伙伴在这篇文章中评论为什么 ...
微信小程序如何转云开发
微信小程序云开发,为前端全栈开发提供了很大的便利.本文主要介绍普通的微信小程序如何让转为云开发. 一.建cloudfunction文件夹 cloudfunction文件夹建立在小程序的根目录下. 二. ...
微信小程序登录注册——云开发
微信小程序登录注册页面_云开发_调用云数据库源代码下载https://download.csdn.net/download/lujiebin/11241027 1.界面展示 2.代码 1.云开发初始 ...
2022最新坤坤鸡乐盒微信小程序源码+云开发的
正文: 云开发坤坤鸡乐盒微信小程序源码是由坤坤铁粉ikun们开发的. 因部分ios用户无法体验共举办,特地开发的小程序版鸡乐盒,听说作者也是5年的铁粉. 现在特别火,我也就不多作介绍了,点击就可以发出 ...
微信小程序详细内容+云开发
目录一.微信小程序开发二.文件介绍三.基础组件(基本基础组件,更多详细请查看微信开发文档) 四.模板语法一.文本渲染 {{表达式}} 二.条件渲染三.列表渲染四.自定义列表五.imp ...

【微信小程序-原生开发+云开发+TDesign】修改用户头像（含wx.chooseMedia，wx.cloud.uploadFile，wx.cloud.deleteFile的使用）

效果预览

核心技术（含业务逻辑）

完整范例代码

选择新头像

上传保存新头像，删除旧头像

【微信小程序-原生开发+云开发+TDesign】修改用户头像（含wx.chooseMedia，wx.cloud.uploadFile，wx.cloud.deleteFile的使用）相关推荐

最新文章

热门文章