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

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

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

相关推荐
黑客飓风2 小时前
当GitHub宕机时,我们如何协作?
github·notepad++
fakaifa3 小时前
点大餐饮独立版系统源码v1.0.3+uniapp前端+搭建教程
小程序·uni-app·php·源码下载·点大餐饮·扫码点单
Dignity_呱8 小时前
如何在不发版时,实现小程序的 AB 测试?
前端·面试·微信小程序
说私域9 小时前
基于开源 AI 大模型 AI 智能名片 S2B2C 商城小程序视角下的企业组织能力建设与破圈升级
人工智能·小程序
fakaifa17 小时前
【最新版】CRMEB Pro版v3.4系统源码全开源+PC端+uniapp前端+搭建教程
人工智能·小程序·uni-app·php·crmeb·源码下载·crmebpro
2501_915918411 天前
iOS 应用上架全流程实践,从开发内测到正式发布的多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview
上海云盾第一敬业销售1 天前
小程序被爬虫攻击,使用waf能防护吗?
爬虫·小程序
suncentwl1 天前
做一个答题pk小程序多少钱?
小程序·答题小程序·知识竞赛·答题pk软件
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化策略研究
人工智能·小程序
咸虾米_1 天前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
微信小程序·小程序·uniapp开发·小程序地图api