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

这篇具有很好参考价值的文章主要介绍了[uni-app] 微信小程序如何修改替换头像。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

技术：

前端应用框架为uni-app

UI框架为uView

uniapp修改头像,uni-app,微信,uni-app,微信小程序,头像

思考：

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事件 changeUserPhoto

      changeUserPhoto() {
			let _this = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ["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)}`;
					
				});
		}
	}

以上完成了头像的修改

在写这块的业务处理逻辑时，个人时感觉某些接口还是有多余设计成分在里面的，此时还是要多根跟后端开发好好商量设计下如何解决才更高效！文章来源地址https://www.toymoban.com/news/detail-516718.html

到了这里，关于[uni-app] 微信小程序如何修改替换头像的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！