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

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

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方法把图片传到服务器便可。

相关推荐
一孤程15 小时前
Airtest自动化测试第五篇:小程序与Web测试——跨平台自动化全覆盖
前端·自动化测试·小程序·自动化·测试·airtest
CRMEB定制开发18 小时前
开源商城源码下载后怎么搭建?五步走通完整流程
小程序·开源·商城系统·私域运营
qq57521731918 小时前
Notepad++下载和安装
笔记·notepad++·记事本
JudithHuang20 小时前
受够了带广告的单位换算 App,我自己做了一个微信小程序
微信小程序
小羊Yveesss1 天前
2026年如何自己搭建一个外贸网页?单页验证和完整网站的区别
微信小程序·小程序·开源
weishuangyun1231 天前
怎么开发自己的小程序?2026 三种主流方式实测对比
小程序
言乐61 天前
Python视频相对亮度检测
数据库·python·计算机视觉·小程序·音视频
2501_916008891 天前
iOS 证书管理最佳实践 从创建到续期的完整指南
android·ios·小程序·https·uni-app·iphone·webview
小羊Yveesss2 天前
2026年微信小程序搭建一般需要多长时间?不同方案周期和延期点
微信小程序·小程序
禾高网络2 天前
互联网医院|AI 互联网医院成品开发系统
java·大数据·人工智能·小程序