[uni-app] 微信小程序如何修改替换头像

如下图所示，微信小程序中涉及到修改头像的交互

技术：

前端应用框架为uni-app

UI框架为uView

思考：

1. 头像点击事件 click

2.从本地相册选择图片或使用相机拍照uni.chooseImage(OBJECT)，方法执行成功后根据success中返回的图片的本地文件路径列表 tempFilePaths，做操作

3.上传图片uni.uploadFile(OBJECT)，通过上传接口拿到图片的路径或者跟图片有关的值，再根据这个值调取后端接口拿到base64字符串【最后还是要看后端开发要怎么设计了，说白了都是从接口里拿到想要的值。。】

<u-cell title="头像" :border="false" isLink><view slot="icon"><u-icon name="photo" color="#eac47f"></u-icon></view><view slot="value"><u-avatar :src="userPhoto" shape="circle" @click="changeUserPhoto"></u-avatar></view>
</u-cell>

js：

// 点击头像触发click事件 changeUserPhotochangeUserPhoto() {let _this = this;uni.chooseImage({count: 1, //默认9sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"], //从相册选择或者打开相机success: function (res) {if (res.tempFiles[0].size > 2 * 1024 * 1024) {_this.$refs.uToast.show({type: "error",message: "图片大小不得超过2MB"});} else {uni.uploadFile({url: `${Config.baseURL}jz-fileserver/api/v1/attachs?relationType=profile`,filePath: res.tempFilePaths[0],name: "file",success: uploadFileRes => {// 根据返回的uploadFileRes.data做操作，往下逻辑要怎么写关键还是要看后端如何处理。就当前逻辑该上传接口返回的是图片需要的一个ID，// 该方法是通过将uploadFileRes.data中的某个值传参给后端，后端返回ArrayBuffer对象，最后在专程Base64字符串_this.showPhoto(uploadFileRes.data)}});}}});},// 转base64,将ArrayBuffer对象，转成Base64字符串，最后赋值
showPhoto(data) {this.$http.showPhoto({id: JSON.parse(data.data.id),size: "300"}).then(res => {const arrayBuffer = new Uint8Array(res.data);this.userPhoto = `data:image/jpeg;base64,${uni.arrayBufferToBase64(arrayBuffer)}`;});}}

以上完成了头像的修改

在写这块的业务处理逻辑时，个人时感觉某些接口还是有多余设计成分在里面的，此时还是要多根跟后端开发好好商量设计下如何解决才更高效！

[uni-app] 微信小程序如何修改替换头像相关推荐

uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序动态修改头部title
微信小程序动态修改头部title 1,正常我们设置title的名字是这么设置的 {"navigationBarTitleText": "详情", } 2.在js ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
微信小程序获取用户信息-头像、昵称......
微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权目录微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权 1.wx.getUserProfile文档 2.代码演示 3.演示过程(图示) ...
一款DIY微头像助手的微信小程序，可以给头像加入各种个性挂件（圣诞帽，中国年，小红旗，口罩）的小程序工具
微头像助手 demo请于微信小程序搜索:微头像助手一款DIY微头像助手,可以给头像加上各种挂件的微信小程序! 部署说明: 直接上转即可使用本项目从技术上是支持所有平台(H5,APP,小程序)的,但 ...
微信小程序：自动采集头像大全微信小程序源码
这是一款以头像为主的一款微信小程序源码该小程序内包含了各种分类,各种样式都有可以说是目前最全的一款头像小程序源码五大分类情侣,女生,男生,卡通,风景每大分类下面都有N个小分类,每个小分类下面有 ...
微信小程序：流量主头像组合微信小程序
这是一个头像类型的小程序源码支持多种流量主比如激励视频,Banner,视频,插屏,原生模板等小程序内包含多种头像非类,都是自动采集比如男生头像,男声头像,动漫头像等等另外该小程序还支持姓氏头 ...

[uni-app] 微信小程序如何修改替换头像

[uni-app] 微信小程序如何修改替换头像相关推荐

最新文章

热门文章

[uni-app] 微信小程序 如何修改替换头像

[uni-app] 微信小程序 如何修改替换头像相关推荐

最新文章

热门文章

[uni-app] 微信小程序如何修改替换头像

[uni-app] 微信小程序如何修改替换头像相关推荐