uniapp 獲取用戶頭像 存起來
如果你想在 uni-app 中實現(xiàn)獲取用戶頭像并保存下來,可以先在頁面中添加一個圖片組件,用于展示用戶的頭像。然后,給用戶選擇上傳頭像的按鈕綁定一個事件方法 onChooseAvatar,用于調用微信小程序的 API 實現(xiàn)獲取用戶上傳的頭像并展示:
<template>
<view>
<image mode="aspectFill" :src="avatarUrl" />
<button @tap="onChooseAvatar">選擇頭像</button>
</view>
</template>
<script>
export default {
data() {
return {
avatarUrl: '', // 用戶頭像鏈接
}
},
methods: {
onChooseAvatar() {
uni.chooseImage({
count: 1, // 用戶最多只能選擇一個文件(即頭像)
success: (res) => {
// 獲得選擇的本地文件路徑
let filePath = res.tempFilePaths[0]
// 將文件轉為 base64 編碼的數(shù)據(jù)
uni.getFileSystemManager().readFile({
filePath: filePath,
encoding: 'base64',
success: (result) => {
// 將頭像的 base64 數(shù)據(jù)保存到本地緩存中
uni.setStorage({
key: 'avatarUrl',
data: result.data,
success: () => {
// 將頭像的 https:// 開頭的鏈接保存到 data 中,用于圖片組件展示
this.avatarUrl = 'data:image/png;base64,' + result.data
}
})
}
})
}
})
},
},
onLoad() {
// 在 onLoad 鉤子函數(shù)中嘗試從本地緩存中獲取頭像信息
uni.getStorage({
key: 'avatarUrl',
success(res) {
// 如果緩存中有頭像信息,就將鏈接賦值給 data 中的 avatarUrl 字段,用于圖片展示
if (res.data) {
this.avatarUrl = 'data:image/png;base64,' + res.data
}
}
})
}
}
</script>在代碼中,onChooseAvatar 方法用于調用 uni.chooseImage API 來讓用戶從相冊或拍照選擇上傳頭像圖片,并將文件轉為 base64 編碼。然后,再將頭像的 base64 數(shù)據(jù)通過 uni.setStorage 方法保存到本地緩存中,這樣可以避免每次進入頁面都要重新選擇頭像。最后,將頭像的 https:// 開頭的鏈接賦值給 data 中的 avatarUrl 字段,用于圖片組件展示。在 onLoad 鉤子函數(shù)中,嘗試從本地緩存中獲取頭像信息,若緩存中有頭像信息,則在頁面加載時將頭像鏈接賦值給 data 中的 avatarUrl 字段,讓圖片組件展示用戶的頭像。
關鍵詞: uniapp獲取用戶頭像存起來
鄂公網(wǎng)安備42060002000147