taro小程序用户头像昵称获取

微信发布《小程序用户头像昵称获取规则调整公告》之后，无法再使用getUserProfile获取用户头像和昵称，因此小程序官方提供了头像昵称填写功能来完善个人资料。

对button添加open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"获取头像
对input添加type="nickname"获取昵称

使用方法：

新增一个个人信息页面用来完善个人资料
在这里插入图片描述
获取头像：

<Buttonopen-type="chooseAvatar"onChooseAvatar={onChooseAvatar}  // 在taro中使用的是onChooseAvatarclassName="info-content__btn"
><Image src={avatar} className="info-content__avatar" /> 
</Button>

在这里插入图片描述

获取昵称：

<Inputtype="nickname" className="info-content__input"placeholder="请输入昵称"value={nickname}onInput={(e) => setNickName(e.detail.value)}
/>

在这里插入图片描述
注意：头像获取到的只是头像的临时地址，需要将头像上传到服务器存储获取永久地址
Taro.uploadFile具体参数见taro官方文档

// 获取头像onChooseAvatar的方法
const onChooseAvatar = (e) => {setAvatar(e.detail.avatarUrl)uploadFile(e.detail.avatarUrl)  
}// 上传头像到服务器
const uploadFile = (file) => {Taro.uploadFile({url: HOST + 'star/api/user/upload/user/head', filePath: file,name: 'uploadFile',header: {'content-type': 'multipart/form-data',token: user.token,},formData: {},success: (res) => {if (res.data) {const resp = JSON.parse(res.data)if (resp.code === ResponseCode.SUCCESS) {let imgUrl = resp.datasetAvatar(imgUrl)} else {Taro.showToast({icon: 'none',title: resp.msg,})}}},fail: (e) => {Taro.showToast({icon: 'none',title: '头像上传失败，请重试',})},})}