微信小程序更换头像的功能

微信小程序开发,个人中心中更换头像的更能使用频率很高,这里记录下实现方式:

html 复制代码
<view class="setting-list avatar-container">
    <text>头像</text>
    <view class="avatar">
      <button hover-class="none" open-type="chooseAvatar" bindchooseavatar="chooseAvatar">
        <image src="{{ userInfo.headimgurl || '/assets/images/avatar.png' }}" />
      </button>
    </view>
  </view>

button按钮须设置 open-type="chooseAvatar" 这个属性,并绑定事件 bindchooseavatar="chooseAvatar"

javascript 复制代码
  chooseAvatar(e) {
    let avatar = e.detail.avatarUrl;
  },

这样我们就能拿到图片本地的临时路径,然后使用wx.uploadFile方法把图片传到服务器便可。

相关推荐
窝窝和牛牛1 小时前
记录小白使用 Cursor 开发第一个微信小程序(一):注册账号及下载工具(250308)
微信小程序·小程序
朱剑君2 小时前
Python写一个查星座的小程序,适合初学者练手——字典和if语句练习
python·小程序
小钟H呀3 小时前
Uniapp实现多种文件类型上传
uni-app·notepad++
内向的小农5 小时前
【微信小程序 onTabItemTap:精准监听 TabBar 点击事件】
微信小程序·小程序
小胖墩有点瘦8 小时前
基于RNN+微信小程序+Flask的古诗词生成应用
微信小程序·小程序·flask
java1234_小锋9 小时前
[免费]微信小程序(图书馆)自习室座位预约管理系统(SpringBoot后端+Vue管理端)(高级版)【论文+源码+SQL脚本】
微信小程序·自习室·java毕业设计·自习室预约·小程序自习室
帅次10 小时前
Flutter:StatelessWidget vs StatefulWidget 深度解析
android·flutter·ios·小程序·swift·webview·android-studio
帅次13 小时前
Flutter Widget 体系结构解析
android·flutter·ios·小程序·xcode·web app·dalvik
郑州拽牛科技21 小时前
开发社交陪玩app小程序
大数据·微信小程序·小程序·系统架构·开源软件
源码姑娘1 天前
基于Nodejs的火车订票小程序(源码+部署教程)
小程序·毕业设计