微信小程序新版头像昵称API [保存用户头像到服务器]

 根据微信官方文档的说法，2022年10月之后，原本的获取昵称和头像的api，也就是wx.getUserProfile和wx.getUserInfo将停止支持，在那之后发布和更新的小程序必须停止使用这两个api。

 这两个api获得的用户头像均为一个url，指向网络上的一个头像图片。前端获取该链接后可通过wx.request传到后端，服务器访问该链接并将图片下载保存。

微信官方推荐的替代做法：头像昵称填写 | 微信开放文档 (qq.com)

代码(来自上述的链接)：

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{
   
   {avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

必须让用户点击开发者设置的button标签，然后手动选择自己的微信头像，或者在相册中选择一张图片，button应该填的的属性见上图。

测试后发现，这种方法得到的avatarUrl是微信本地临时文件的路径，可以让小程序显示使用，但是不能在远程访问，也就是不能通过发送url给服务器的方式让服务器下载图片，必须把图片本身发送给服务器。所以我们可以使用wx.uploadFile，将刚刚保存在本地的头像发送至服务器

  onChooseAvatar(e) {
    var avatarUrl = e.detail 
    this.setData({
      avatarUrl,//让图片预览处显示刚刚选择的图片
    });
    wx.uploadFile({
      filePath: avatarUrl,
      name: 'avatarImg',
      url: uploadUrl,//服务器端接收图片的路径
      success:function(res){
        console.log(res);//发送成功回调
      },
      fail:function(res){
        console.log(res);//发送失败回调，可以在这里了解失败原因
      }
    })
  },

注意：wx.uploadFile所允许的域名白名单需要在小程序后台配置，与wx.request是分开的。配置之后记得清除本地缓存才会生效。