修改头像功能

每一行个标签都有绑定事件功能

　　1、使用微信头像

　　2、自定义头像

　　3、显示图片。点击打开系统或者相机获取头像图片

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">使用微信头像 </button>

<button size="default" bindtap="handleBtn">自定义头像</button>
<image src="{{userPhoto}}" bindtap="handleUploadImage"></image>

 

　　1） 使用微信头像

　　　　　　用的是微信小程序自带的功能

　　　　　　通过设置open-type  和绑定事件bindgetuserinfo

//使用本身自带的头像
  bindGetUserInfo(ev){
      let userInfo = ev.detail.userInfo;     //获取用户信息
      if(userInfo){
        this.setData({
          userPhoto:userInfo.avatarUrl        //获取用户头像
        },()=>{
          wx.showLoading({　　　　　　　　　　　　// 提示框
            title: '上传中',
          })
        // 更新数据库       找到users表中的特定数据来更新data 
        db.collection('users').doc(app.userInfo._id).update({
          data:{
            userPhoto:userInfo.avatarUrl      
          }   //成功后隐藏提示框  和抛出成功提示框
        }).then(res=>{     
          wx.hideLoading({
            success: (res) => {},
          })
                wx.showToast({
                  title: '上传更新成功',
                }) ;
// 系统使用的头像也要更新回来

              app.userInfo.userPhoto = userInfo.avatarUrl; 
        })
        })
      }
  }
})

 

　　　　2） 自定义头像

　　　　　　使用bindtap绑定handleBtn事件  函数

// 点击按钮 
  handleBtn(){
    wx.showLoading({
      title: '上传中',
    })
    // 云路径 
    let cloudPath = 'userPhoto/'+app.userInfo._openid + Date.now() + ".jpg";
    wx.cloud.uploadFile({
      cloudPath,
      // 存储路径
      filePath:this.data.userPhoto[0]
    }).then(res=>{
      // 图片文件=fileid  id值 
      let fileID = res.fileID;
      if (fileID){
        db.collection('users').doc(app.userInfo._id).update({
          data:{
            userPhoto:fileID
          }
        }).then(res=>{
          wx.hideLoading({
            success: (res) => {},
          })
                wx.showToast({
                  title: '上传更新成功',
                }) ;
                // fileid 更新本地图片
              app.userInfo.userPhoto = fileID; 
        })
      }
    })
  },

 

 3）打开系统或者相机获取头像图片

　　　　1、src属性动态绑定系统userphoto图片字段   

　　　　2、绑定事件handleUploadImage

　　　　　　　　调用了wx的选择图片功能

　　　　　　　　　　count 选择1张图片

　　　　　　　　　　　sizeType 可以选择压缩或者原图

　　　　　　　　　　　sourceType 可以选择相册 或者相机

　　　　　　　　　　　成功后 设置更新系统图片字段

handleUploadImage(){
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res)=> {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        this.setData({
          userPhoto:tempFilePaths
        })
      }
    })
  },