React Native(Expo)如何通过Firebase实现头像上传拉取展示

你现有代码存在3个核心问题导致功能无法正常运行：

• 上传逻辑直接写在组件渲染周期内，会在页面加载时自动触发，没有和选图流程绑定
• 未将ImagePicker返回的本地文件URI转换为Firebase Storage要求的Blob格式，且引用了未定义的file变量
• 未实现上传后获取访问链接、页面初始化拉取已有头像的逻辑，且固定文件名test.jpg会导致所有用户头像互相覆盖

前置配置 #

1. 确保你已经完成Firebase App的初始化，且已在Firebase控制台开启Storage服务，配置好读写权限规则（开发阶段可先设置为允许认证用户读写，上线前再收紧权限）
2. 如果你使用Expo Go调试，注意原生Firebase SDK无法在Expo Go中运行，需要使用Expo Dev Client打包自定义调试端；如果不想用自定义端，可以替换为JS SDK版本的Firebase Storage，逻辑完全一致
3. 在app.json中补充必要权限：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSPhotoLibraryUsageDescription": "需要访问相册选择头像",
        "NSCameraUsageDescription": "需要使用相机拍摄头像"
      }
    },
    "android": {
      "permissions": ["READ_MEDIA_IMAGES", "CAMERA"]
    }
  }
}

注意：expo-image-picker v14及以上版本选图结果的取消字段为canceled，旧版本为cancelled，请根据你安装的版本调整判断逻辑

完整可运行代码 #

import React, { useState, useEffect } from 'react';
import { Button, Image, View, ActivityIndicator, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { getStorage, ref, uploadBytes, getDownloadURL } from '@react-native-firebase/storage';
// 如果你使用Firebase JS SDK，替换上面的storage导入为：
// import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
import auth from '@react-native-firebase/auth'; // 用于获取当前登录用户ID，JS SDK对应import { getAuth } from "firebase/auth";

export default function AvatarPicker() {
  const [avatarUri, setAvatarUri] = useState(null);
  const [uploading, setUploading] = useState(false);
  const storage = getStorage();
  // 获取当前登录用户ID，未登录场景可替换为你自己的用户唯一标识
  const currentUser = auth().currentUser;
  const avatarRef = ref(storage, `avatars/${currentUser.uid}.jpg`);

  // 页面加载时拉取已有头像
  useEffect(() => {
    const loadExistingAvatar = async () => {
      try {
        const url = await getDownloadURL(avatarRef);
        setAvatarUri(url);
      } catch (err) {
        // 没有上传过头像时会返回404错误，属于正常场景，不用额外处理
        if (err.code !== 'storage/object-not-found') {
          console.error('拉取头像失败:', err);
        }
      }
    };
    loadExistingAvatar();
  }, []);

  // 选图+上传逻辑
  const pickAndUploadAvatar = async () => {
    // 打开相册选图
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1], // 头像用1:1比例裁剪
      quality: 0.8, // 适当压缩减少上传体积
    });

    // 用户取消选图直接返回
    if (result.canceled) return;

    const selectedImageUri = result.assets ? result.assets[0].uri : result.uri; // 兼容新旧版本ImagePicker返回结构
    setUploading(true);

    try {
      // 将本地URI转为Blob格式
      const response = await fetch(selectedImageUri);
      const imageBlob = await response.blob();

      // 上传到Firebase Storage
      await uploadBytes(avatarRef, imageBlob);
      
      // 上传完成后获取可访问的下载链接
      const downloadUrl = await getDownloadURL(avatarRef);
      setAvatarUri(downloadUrl);

      Alert.alert('提示', '头像上传成功');
    } catch (err) {
      console.error('头像上传失败:', err);
      Alert.alert('错误', '头像上传失败，请重试');
    } finally {
      setUploading(false);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20 }}>
      {avatarUri ? (
        <Image 
          source={{ uri: avatarUri }} 
          style={{ width: 200, height: 200, borderRadius: 100 }} // 圆形头像
        />
      ) : (
        <View style={{ width: 200, height: 200, borderRadius: 100, backgroundColor: '#eee', alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator animating={uploading} size="large" />
        </View>
      )}
      <Button 
        title={uploading ? "上传中..." : "选择头像上传"} 
        onPress={pickAndUploadAvatar}
        disabled={uploading}
      />
    </View>
  );
}

关键注意点 #

• Blob转换：React Native环境下无法直接读取本地文件路径传给Firebase上传接口，必须通过fetch(本地URI)转成二进制Blob格式
• 路径规则：固定使用用户UID作为头像文件名，既不会出现文件覆盖问题，也不需要额外在数据库存储头像路径，直接按用户ID就能读取到对应头像
• 权限规则：Firebase Storage默认权限是禁止所有读写，开发阶段可临时将规则设置为：

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /avatars/{userId}.jpg {
        allow read: if request.auth != null;
        allow write: if request.auth.uid == userId;
      }
    }
  }
  

  保证用户只能修改自己的头像，避免越权操作
• 如果你需要支持上传进度展示，可以把uploadBytes替换为uploadBytesResumable，监听任务的state_changed事件获取进度百分比

内容的提问来源于stack exchange，提问作者suchafoool