文章来源（hbsjsd.cn）湖北高端网站定制开发公司-速建时代

如果你想在 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 字段，让图片组件展示用户的头像。