【微信小程序-原生开发+云开发+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)
        }
      )
    },
目录
相关文章
|
3天前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
10 1
|
3天前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
8 0
|
3天前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
17 0
|
3天前
|
小程序
【微信小程序-原生开发】实用教程21 - 分包
【微信小程序-原生开发】实用教程21 - 分包
9 0
|
3天前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
7 0
|
2月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
2月前
|
小程序 前端开发 开发工具
微信小程序云开发|基于微信小程序实现房产中介平台系统
微信小程序云开发|基于微信小程序实现房产中介平台系统
|
8月前
|
小程序 JavaScript 数据库
小程序云开发实战七:云开发首页列表跳转详情页
小程序云开发实战七:云开发首页列表跳转详情页
51 0
|
2月前
|
小程序 JavaScript 前端开发
微信小程序云开发入门实践
微信小程序云开发入门实践
|
4天前
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
8 0