微信小程序获取用户头像和昵称完美解决方法_小程序获取用户头像昵称

1. WXML

          
            头像：                                  昵称：

2. JS

import request from '../../utils/request'
const baseUrl = require('../../utils/baseUrl')
Page({
  data: {
    userInfo: {
      avatar: '',
      customerId: '',
      depositNum: '',
      mobile: '',
      nickName: '',
      waterNum: ''
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getUserInfo()
  },
  // 最终提交保存
  async tapSave() {
    await this.uploadFile()
    console.log(this.data.userInfo);
    // return
    const res = await request('/customerInfo/update', 'PUT', {
      "avatar": this.data.userInfo.avatar,
      "nickName": this.data.userInfo.nickName,
    })
    console.log('res', res);
    if (res.success) {
      wx.showToast({
        title: '保存成功',
        icon: 'none'
      })
      wx.switchTab({ url: '/pages/usercenter/index' });
    }
  },
  // 输入昵称
  onInput(e) {
    const { value } = e.detail
    console.log('输入昵称', value);
    this.setData({
      ['userInfo.nickName']: value
    })
  },
  // 选择头像
  onChooseAvatar(e) {
    console.log('选择头像', e);
    const { avatarUrl } = e.detail
    this.setData({
      ['userInfo.avatar']: avatarUrl
    })
  },
  uploadFile() {
    let that = this
    return new Promise((resolve, reject) => {
      console.log('uploadFile');
      let url = `${baseUrl}/waterStoreFile/upload`
      // res.tempFiles[0].tempFilePath
      wx.uploadFile({
        filePath: this.data.userInfo.avatar,
        name: 'file',
        url: url,
        header: {
          'Authorization': wx.getStorageSync('token') || ''
        },
        success(res) {
          let result = JSON.parse(res.data)
          console.log('上传成功', result);
          if (result.success) {
            console.log('成功');
            that.setData({
              ['userInfo.avatar']: result.data.outsideUrl
            })
          }
          resolve()
        },
        fail(rej) {
          console.log('rej', rej);
          resolve(rej)
        }
      })
    })
  },
  async getUserInfo() {
    const res = await request('/customerInfo/get', 'GET')
    console.log('个人信息', res);
    this.setData({
      userInfo: res.data || {}
    })
  }
})

3. WXSS

.content {
  padding: 20rpx;
}

.info__footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 80rpx;
  padding-top: 20rpx;
  background: #fff;
}

.info__footer .footer-btn {
  width: 398rpx;
}

.footer-btn {
  background: linear-gradient(90deg, #34AAFF 0%, #0A73EE 100%) !important;
  border: none !important;
}

.footer-btn::after {
  border: none !important;
}

.content .row {
  display: flex;
  align-items: center;
  height: 110rpx;
  padding-left: 20rpx;
}

.content .text1 {
  flex: 2;
}

.content .name-input,
.content .avatar-wrapper {
  flex: 6;
  text-align: right;
}

.content .avatar-wrapper::after {
  border: none !important;
}

.content .avatar-wrapper {
  display: flex;
  justify-content: flex-end;
}

.content .avatar-wrapper .avatar {
  display: block;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}