uniapp微信小程序开发踩坑日记:获取用户头像并持久化存储到后端服务器 |
您所在的位置:网站首页 › 收藏微信头像 › uniapp微信小程序开发踩坑日记:获取用户头像并持久化存储到后端服务器 |
用户头像昵称获取规则的调整
原来获取用户头像和昵称调用的是uni.getUserInfo(OBJECT)接口,但是2021年4月28日24时后发布的小程序新版本,无法通过uni.getUserInfo与获取用户个人信息(头像、昵称、性别与地区) 详细情况见官方文档:小程序登录、用户信息相关接口调整说明 | 微信开放社区 (qq.com) 目前微信官方提供的获取用户头像的方法只有如下这种 开放能力 / 用户信息 / 获取头像昵称 (qq.com) 获取用户头像在vue3构建的uniapp微信小程序中,获取用户头像的代码如下 代码解释:button是包裹头像的容器,默认显示灰色头像(即avatarUrl的初始值),用户点击button,触发onChooseAvatar函数,可修改头像。设函数onChooseAvatar的第一个参数e,e.detail.avatarUrl中储存了用户上传的新头像,将e.detail.avatarUrl赋值给avatarUrl.value即可完成新头像的渲染 //script部分 const avatarUrl = ref('https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0') const onChooseAvatar = e => { avatarUrl.value = e.detail.avatarUrl } //html部分 //css部分 .avatar { position: relative; width: 120rpx; height: 120rpx; border-radius: 50%; background-color: #eee; } .avatarImg { position: absolute; left: 0; top: 0; width: 120rpx; height: 120rpx; border-radius: 50%; background-color: #eee; } 将头像持久化存储到后端虽然e.detail.avatarUrl存储了用户的新头像,比如:http://tmp_223cd440990786c338a5610060d4e96aeda77d2678920.jpg 但是这只是微信的一个临时文件,如果直接将这段路径以字符串的形式存储到后端服务器,那下次获取到头像的时候可能该临时文件已经失效,导致头像无法正常渲染,失效时返回的路径是wxfile://tmp_223cd440990786c338a5610060d4e96aeda77d2678920.jpg,这样的文件在渲染时会出现下图所示的报错 所以我们需要在文件失效之前,将文件保存到后端服务器 这就涉及到一个新的API:uni.uploadFile(OBJECT) 具体使用方法见官方文档:uni.uploadFile(OBJECT) | uni-app官网 (dcloud.net.cn) 所以在onChooseAvatar函数中,除了完成avatarUrl.value = e.detail.avatarUrl的赋值操作,我们还可以把图片保存到后端服务器,具体代码如下 //设置用户头像 const onChooseAvatar = e => { avatarUrl.value = e.detail.avatarUrl //将头像保存到后端 uni.uploadFile({ url: '后端服务器地址', filePath: avatarUrl.value, //头像文件 header: { 请求Header }, formData: { 请求中其他额外的formdata,不是必填项 }, name: '文件对应的 key,开发者在服务器端通过这个key可以获取到文件二进制内容', success: (uploadFileRes) => { console.log(uploadFileRes.data); } }); } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |