The WeChat applet uses the avatar nickname to complete the avatar upload.

After WeChat adjusted the API for obtaining user information last year, now the user's avatar and nickname can only be obtained through the user's own trigger component. So how do you do it? Let me share with you how I did it (newbies, please give me more information) Sorry, if you have any questions please point them out)

wxml：

<view class="top">
    <button class="avatar-wrapper" 
	    open-type="chooseAvatar" 
	    bind:chooseavatar="onChooseAvatar"
    >
      <image class="avatar" src="{
    
    {avatarUrl}}"></image>
    </button> 
    <van-icon name="edit"  class="edit" />
    <input type="nickname" 
	    class="weui-input"  
	    placeholder="微信用户"  
	    bind:change="getNickname" 
	    maxlength="10" 
	    value="{
    
    {username}}"/>
  </view>

js：

// 后端接口
import {
    
    getUserInfo,updateUserInfo,uploadPhoto} from '../api/profile/profile.js'

// 默认头像
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
    
    
  /**
   * 页面的初始数据
   */
  data: {
    
    
    // 默认头像
    avatarUrl: defaultAvatarUrl,
    // 用户昵称
    username:null,
    openId:null,
    userId:null
  },
  // 头像上传
  onChooseAvatar(e){
    
    
  	// 回调事件返回的是图片的临时地址，会失效，我们需要调自己的上传接口拿到图片信息渲染到页面
    console.log(e.detail);
	    let avatarUrl  = e.detail.avatarUrl
	    let openId = this.data.openId;
	    this.setData({
    
    
	      avatarUrl,
	    })
    wx.uploadFile({
    
    
      url: "http://192.168.x.xx.xxxx:/users/uploadImage",  // 这里换成你们后端的上传接口即可
      method: 'POST',
      filePath: avatarUrl,
      name: 'file',
      formData: {
    
    
        openId: openId  // 这里放你们接口所需要的参数
      },
      // 成功回调
      success:(res)=>{
    
    
        let result = JSON.parse(res.data); // JSON.parse()方法是将JSON格式字符串转换为JSON对象
        let newAvatarUrl = result.data[0].url; // 返回的图片url
        let userId = this.data.userId;
        // 将返回的url替换调默认的url，渲染在页面上
        this.setData({
    
    
          avatarUrl:newAvatarUrl  
        })
        /*
        	* 下面调保存头像信息的接口(具体实现根据你们实际开发的需求)
        */
          let fileInfo = {
    
    
            userId:userId,
            fileName:result.data[0].name,
            fileUrl:result.data[0].url,
            filePath:result.data[0].path,
          }
          uploadPhoto(fileInfo).then(res=>{
    
    
            console.log(res);
          })
      },
  });
  },
  // 用户昵称
  getNickname: function (e){
    
    
    let input = e.detail.value
    this.setData({
    
    
      username: input 
    })
    // 修改用户昵称
    let user = {
    
    
      openId: this.data.openId,
      userName: this.data.username
    }
    updateUserInfo(user).then(res=>{
    
    
      this.queryInfo();
    })
  },
  // 查询用户信息
  queryInfo(){
    
    
    let openId = wx.getStorageSync('login_info').openid
    this.setData({
    
    
      openId : openId
    })
    getUserInfo(openId).then(res=>{
    
    
      console.log('查询用户信息',res);
      if (res.data.code == 200) {
    
    
      // 将查询到用户头像、昵称等信息覆盖默认值，然后渲染到页面即可
        this.setData({
    
    
        username: res.data.data.userName,
        userId:res.data.data.userId,
        avatarUrl:res.data.data.fileUrl
      })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
  // 页面加载完毕之后查询用户信息
   this.queryInfo();
  },
})