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

技術(shù)：

前端應(yīng)用框架為uni-app

UI框架為uView

?思考：

1. 頭像點擊事件 click

2.從本地相冊選擇圖片或使用相機拍照uni.chooseImage(OBJECT)，方法執(zhí)行成功后根據(jù)success中返回的圖片的本地文件路徑列表 tempFilePaths，做操作

3.上傳圖片uni.uploadFile(OBJECT)，通過上傳接口拿到圖片的路徑或者跟圖片有關(guān)的值，再根據(jù)這個值調(diào)取后端接口拿到base64字符串 【最后還是要看后端開發(fā)要怎么設(shè)計了，說白了都是從接口里拿到想要的值。。】

<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：?

// 點擊頭像觸發(fā)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 => {
                                // 根據(jù)返回的uploadFileRes.data做操作，往下邏輯要怎么寫關(guān)鍵還是要看后端如何處理。就當前邏輯該上傳接口返回的是圖片需要的一個ID，
								// 該方法是通過將uploadFileRes.data中的某個值傳參給后端，后端返回ArrayBuffer對象，最后在專程Base64字符串
                                _this.showPhoto(uploadFileRes.data)
							}
						});
					}
				}
			});
		},

// 轉(zhuǎn)base64,將ArrayBuffer對象，轉(zhuǎn)成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)}`;
					
				});
		}
	}

以上完成了頭像的修改

在寫這塊的業(yè)務(wù)處理邏輯時，個人時感覺某些接口還是有多余設(shè)計成分在里面的，此時還是要多根跟后端開發(fā)好好商量設(shè)計下如何解決才更高效！文章來源地址http://www.zghlxwxcb.cn/news/detail-516718.html

到了這里，關(guān)于[uni-app] 微信小程序 如何修改替換頭像的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！