taro小程序用户头像昵称获取-Toy模板网

这篇具有很好参考价值的文章主要介绍了taro小程序用户头像昵称获取。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

使用方法：

新增一个个人信息页面用来完善个人资料
taro获取用户头像,taro,小程序
获取头像：

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

taro获取用户头像,taro,小程序

获取昵称：

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

taro获取用户头像,taro,小程序
注意：头像获取到的只是头像的临时地址，需要将头像上传到服务器存储获取永久地址
Taro.uploadFile具体参数见taro官方文档文章来源地址https://www.toymoban.com/news/detail-558365.html

// 获取头像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.data
            setAvatar(imgUrl)
          } else {
            Taro.showToast({
              icon: 'none',
              title: resp.msg,
            })
          }
        }
      },
      fail: (e) => {
        Taro.showToast({
          icon: 'none',
          title: '头像上传失败，请重试',
        })
      },
    })
  }