小程序 - 修改头像功能

具体需求：登录后缓存微信头像，在调用某接口时，判断数据库中用户是否有头像，若为空，则将微信头像上传至服务器中，后续展示就用数据库中的头像数据。

具体实现：获取缓存的微信头像，调用wx.getImageInfo()得到微信头像路径（这一步是必需步骤），再调用wx.uploadFile()上传微信头像。

代码：

saveUserPhoto(){var that = this;let wxPhoto = wx.getStorageSync('avatar')console.log('开始上传微信头像到后台，微信头像地址：',wxPhoto)//获取图片信息wx.getImageInfo({src: wxPhoto,success: function (res) {var params = {imgPath: res.path}//上传图片network.upload(params,that.getFileInfo);},fail: function(srev){}});},getFileInfo(res){if(res.fileUrl.state!==0){wx.showToast({title: '上传头像失败',icon: 'none'})return}console.log('调用upload接口上传成功，头像路径：',res.fileUrl.data.url)let params = {photo: res.fileUrl.data.url}network.updateUserPhoto(params,this.getPhotoResult,res.fileUrl.data.url);},getPhotoResult(res,uploadUrl){if(res.data.state===0){wx.setStorageSync('avatar',config.apiList.wxDownload+uploadUrl)}console.log('上传微信头像成功')}


// 上传
function upload(params,cb, obj){var formDataObj = {}if(params.hasOwnProperty('zipLevel')){formDataObj.zipLevel = params.zipLevel}wx.uploadFile({url: config.apiList.wxUpload,filePath: params.imgPath, //要上传文件资源的路径name: 'file', //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容header: {"authorization": wx.getStorageSync('token'),'Content-Type': 'multipart/form-data',},//HTTP 请求中其他额外的参数比如 用户idformData: formDataObj,success(res) {var file = {tempFileUrl: params,fileUrl: JSON.parse(res.data)}typeof cb == 'function' && cb(file, obj)},fail: function () {wx.showToast({title: '请求失败',})}})
}

遇到的问题：在本机调试时成功，但发布到体验版时没有上传成功。在同事手机试时，偶然发现，当打开调试模式时就可以上传成功了。原来，我本地开发时打开了“不校验合法域名...”。当我关闭不校验合法域名时，就重现了这个问题。并且控制台报错"https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中"，最后在小程序后台的downloadFile合法域名中配置上就可以了。

注意： 在小程序配置合法域名后，一定要在开发者工具 - 项目配置中域名信息中刷新一下。

小程序 - 修改头像功能相关推荐

新版带支付功能2021全新最火表情包小程序源码，无限裂变，斗图小程序，头像壁纸，外卖服务内附详细搭建教程
内附详细搭建教程 1.全新表情包小程序已上线 2.增加外卖系统服务,进行进一步的扩展内容分销 3.独立后台系统,自己运营管理,广告位自己控制 4.流量主可以代开,小程序包通过审核,不通过不收钱 5.不 ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
简单实现小程序授权登录功能
本人给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助. 在我们平时工作.学习.生活中,微信小程序已成为我们密不可分的一部分, ...
小程序获取头像试试水 02《程序员变现指南之微信QQ 小程序真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
小程序助手多功能微信小程序反编译工具
介绍: 小程序助手多功能微信小程序反编译工具,软件采用 VS 2017 编译,需安装.net 4.0 或以上版本方可运行,理论上 win7 .win10及以上系统 x86 x64 运行正常,条件有限未 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
小程序【头像昵称填写能力】使用
小程序 [头像昵称填写能力]使用引言 [头像昵称填写能力]使用方法页面使用到的封装方法 asyncWx.js 文件 replace.js 文件注意引言由于小程序在不久之后将对 getUser ...
【React-Native】集成微信官方安卓端SDK，实现微信登录、发送/分享小程序消息等功能
github地址:https://github.com/afresh/react-native-wechat-android 网上已有成熟的第三方插件react-native-wechat(以下简称R ...
小程序用户头像昵称获取规则调整公告及微信小程序基础库的问题
更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头 ...

小程序 - 修改头像功能

小程序 - 修改头像功能相关推荐

最新文章

热门文章