小程序授权更新后的最新获取头像昵称

效果图：

 

 

用到的知识：

 <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
      <image class="avatar" src="{{userInfo.avatar}}"></image>
 </button>

  <input type="nickname" class="weui-input" value="{{userInfo.nickname}}" bindinput="nickname" placeholder="请输入昵称" />
      

　　

wxml:

<view class="container">
<view style="height: 20rpx;"></view>
  <view class="allcontent">
    <view class="textAll">
      <view class="li"><text class="liTitle">头像</text>
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{userInfo.avatar}}"></image>
        </button>
      </view>
      <view class="li">
        <text class="liTitle">昵称</text>
        <input type="nickname" class="weui-input" value="{{userInfo.nickname}}" bindinput="nickname" placeholder="请输入昵称" />
      </view>
    </view>
  </view>
  <view class="submitBtn" bindtap="subUserinfo">确定保存</view>
</view>

　　

css：

.page{
  width: 100%;
  height: 100vh;
  position: relative;
}
.red{
  color:red
}
.allcontent{
 position: relative;
}

.textAll{
  width: calc(100% - 64rpx);
  margin: 0 auto;
 background-color: #fff;
  position: relative;
  border-radius: 10rpx;
}
.textAll .li{
  min-height: 90rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 78rpx);
  border-bottom: 1rpx solid #eee;
  margin: 0 auto;
  padding-right: 35rpx;
  background-position: 100% center;
  background-size: 30rpx 30rpx;
  background-repeat: no-repeat;
  padding-top: 12rpx;
  padding-bottom: 12rpx;
}
.textAll .li:last-of-type{
  border-bottom:none
}
.textAll .liTitle{
  color: #000;
  font-size: 30rpx;
  width: 100rpx;
  display: block;
  text-align: left;
}
.avatar-wrapper{
  width: 100rpx;
  height: 100rpx;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  background-color: #eee;
  padding: 0;
    margin: 0;
}
.avatar-wrapper::after{
  content: '';

}
.avatar{
  display: block;
  width: 100%;
  height: 100%;
}
.weui-input{
  text-align: right
}
.textAll .licontent{
  font-size: 30rpx;
  width:calc(100% - 130rpx);
  display: block;
  text-align: right;
  color: #999;
}

.submitBtn{
  margin: 120rpx auto;
}

　

js:

import {
  HEADER,
  TOKENNAME,
  HTTP_REQUEST_URL
} from '../../config.js';
import {
  postUserChangeInfo
} from '../../api/api.js';
const app = getApp()
Page({
  data: {
    userInfo: {
      avatar: '',
      nickName: ''
    },
    isClick: true
  },
  onLoad() {
    let that = this;
    //判断onLaunch是否执行完毕
    if (app.globalData.checkLogin) {
      this.setData({
        userInfo: app.globalData.userInfo
      })
    } else {
      app.checkLoginReadyCallback = res => {
        this.setData({
          userInfo: app.globalData.userInfo
        })
      };
    }
  },
  onChooseAvatar(e) {
    let that = this;
    const {
      avatarUrl
    } = e.detail;
    let header = HEADER;
    wx.uploadFile({
      url: HTTP_REQUEST_URL + '/api/upload/image/file', //仅为示例，非真实的接口地址
      filePath: avatarUrl,
      name: 'file',
      header: {
        "Content-Type": "multipart/form-data",
        [TOKENNAME]: 'Bearer ' + app.globalData.token
      },
      success(resBack) {
        var res = JSON.parse(resBack.data);
        console.log('我的:', res.data)
        console.log("上传图片后的返回:", res.data.path)
        that.setData({
          ['userInfo.avatar']: res.data.path
        })

      }
    })
  },
  nickname(e) {
    this.setData({
      ['userInfo.nickname']: e.detail.value
    })
  },
  subUserinfo() {
    if (this.data.isClick) {
      this.setData({
        isClick: false
      })
      if (!this.data.userInfo.avatar) {
        this.setData({
          isClick: true
        })
        wx.showToast({
          title:'请上传头像',
          icon:'none'
        })
      } else if (!this.data.userInfo.nickname) {
        this.setData({
          isClick: true
        })
        wx.showToast({
          title:'请输入昵称',
          icon:'none'
        })
      } else {
        let data = {
          nickname: this.data.userInfo.nickname,
          avatar: this.data.userInfo.avatar
        }
        postUserChangeInfo(data).then(res => {
          app.globalData.userInfo.avatar = this.data.userInfo.avatar;
          app.globalData.userInfo.nickname = this.data.userInfo.nickname;
          wx.showToast({
            title:res.message,
            icon:'success'
          })
          setTimeout(function () {
            wx.navigateBack({
              delta: -1
            })
          }, 1200)
        }).catch(err => {
          this.setData({
            isClick: true
          })
          wx.showToast({
            title: err,
            icon: 'error'
          })
        })
      }

    }
  }
})