小程序授权获取头像

wxml

html 复制代码
<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

javascript 复制代码
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);
      }
    })
  },
})

效果:

相关推荐
中微子4 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君4 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子5 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡6 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则6 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele7 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4537 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友7 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir7 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴7 小时前
WebSocket实时通信入门到实践
前端·javascript