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

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

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

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

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

<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 = '/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是分开的。配置之后记得清除本地缓存才会生效。