【微信小程序-原生开发+云开发+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)
        }
      )
    },
目录
相关文章
|
7月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
7月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
624 1
|
7月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
586 8
|
7月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
411 3
|
7月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
26240 0
|
9月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
471 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
12月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2247 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。

热门文章

最新文章