新聞動態

                                                                                  位置:首頁 新聞動態 常見問題

                                                                                  uniapp 獲取用戶頭像 存起來

                                                                                  新聞動態
                                                                                  2023年06月19日 閱讀:2854次

                                                                                  如果你想在 uni-app 中實現獲取用戶頭像并保存下來,可以先在頁面中添加一個圖片組件,用于展示用戶的頭像。然后,給用戶選擇上傳頭像的按鈕綁定一個事件方法 onChooseAvatar,用于調用微信小程序的 API 實現獲取用戶上傳的頭像并展示:

                                                                                  <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 編碼的數據
                                                                                              uni.getFileSystemManager().readFile({
                                                                                                filePath: filePath,
                                                                                                encoding: 'base64',
                                                                                                success: (result) => {
                                                                                                  // 將頭像的 base64 數據保存到本地緩存中
                                                                                                  uni.setStorage({
                                                                                                    key: 'avatarUrl',
                                                                                                    data: result.data,
                                                                                                    success: () => {
                                                                                                      // 將頭像的 https:// 開頭的鏈接保存到 data 中,用于圖片組件展示
                                                                                                      this.avatarUrl = 'data:image/png;base64,' + result.data
                                                                                                    }
                                                                                                  })
                                                                                                }
                                                                                              })
                                                                                            }
                                                                                          })
                                                                                        },
                                                                                      },
                                                                                      onLoad() {
                                                                                        // 在 onLoad 鉤子函數中嘗試從本地緩存中獲取頭像信息
                                                                                        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 數據通過 uni.setStorage 方法保存到本地緩存中,這樣可以避免每次進入頁面都要重新選擇頭像。最后,將頭像的 https:// 開頭的鏈接賦值給 data 中的 avatarUrl 字段,用于圖片組件展示。在 onLoad 鉤子函數中,嘗試從本地緩存中獲取頭像信息,若緩存中有頭像信息,則在頁面加載時將頭像鏈接賦值給 data 中的 avatarUrl 字段,讓圖片組件展示用戶的頭像。

                                                                                  上一篇

                                                                                  下一篇

                                                                                  亚洲中文字幕在线19页_99久久国产精品免费热7788_欧美专区日韩专区综合专区_小泽玛利亚一区_gogo999亚洲肉体艺术