【微信小程序-原生开发+云开发+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%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
2天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
12 3
|
8天前
|
小程序
|
8天前
|
小程序
|
28天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
424 7
|
28天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
485 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
110 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
77 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
173 1

热门文章

最新文章