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

简介: 【微信小程序-原生开发+云开发+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 = 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)
        }
      )
    },
目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
14天前
|
小程序 Android开发
|
3天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
16 3
|
9天前
|
小程序
|
10天前
|
小程序 数据安全/隐私保护
|
9天前
|
小程序
|
15天前
|
小程序
|
15天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
13天前
|
小程序