小程序授权获取头像

简介: 小程序授权获取头像

wxml

<view class="header">
  <text>头像</text>
  <button class="butt" plain="true" open-type="chooseAvatar" bind:chooseavatar="chooseAvatar">
    <image src="{{HeadUrl}}" mode="" style="width: 70px;height: 70px;margin-top: 20px;" />
  </button>
</view>

js

page({
  data: {
    HeadUrl: 'https://pic.imgdb.cn/item/64367f2c0d2dde5777557749.png' //默认头像(登录前)
  },
// 头像
  chooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    console.log(avatarUrl); //本地图片
    wx.uploadFile({
      url: 'https://travel.kuxia.top/api/science/upload',
      filePath: avatarUrl,
      name: 'file',
      success: (res) => {
        var data = JSON.parse(res.data);
        console.log('https://travel.kuxia.top' + data.front_file); //服务器图片
        this.setData({
          HeadUrl: 'https://travel.kuxia.top' + data.front_file,
          // HeadUrl: data.front_file
        })
        wx.showToast({
          title: '上传成功',
          icon: 'success',
          duration: 2000 //持续的时间
        })
      },
      fail: (err) => {
        console.log(err);
      }
    })
  },
})

效果:

相关文章
|
6月前
|
小程序 API
微信小程序——授权登录
微信小程序——授权登录
117 0
|
6月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
206 0
|
6月前
|
小程序 JavaScript
小程序授权获取昵称
小程序授权获取昵称
|
1月前
|
小程序 算法 前端开发
微信小程序---授权登录
微信小程序---授权登录
75 0
|
3月前
|
存储 小程序 JavaScript
|
3月前
|
小程序 JavaScript API
|
3月前
|
小程序 前端开发 安全
|
4月前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
82 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
|
4月前
|
小程序
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
69 0
|
6月前
|
存储 小程序 前端开发
超简单实现小程序用户授权登录与退出
本文介绍了如何轻松实现小程序的用户授权登录与退出功能。通过调用微信的`wx.getUserProfile` API获取用户信息,成功后存储到本地以实现授权登录,并在WXML、CSS和JS中提供示例代码。用户信息存储使用`wx.setStorageSync`,退出登录则清除相关缓存,提升用户体验。
150 1