React Native Expo多图上传Firebase存储与集合遇阻求助

前置准备 #

• 安装依赖：

  expo install expo-image-picker firebase uuid
  

• 已完成Firebase项目配置（android/ios端的google-services.json/GoogleService-Info.plist已添加，expo.config.js配置正确）

核心实现步骤 #

1. 选择多张图片 #

使用expo-image-picker的多选功能获取图片本地URI：

import * as ImagePicker from 'expo-image-picker';

const pickMultipleImages = async () => {
  const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (!permissionResult.granted) {
    alert('需要开启相册访问权限');
    return [];
  }

  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsMultipleSelection: true,
    quality: 0.8,
  });

  return result.canceled ? [] : result.assets;
};

2. 单张图片上传至Firebase Storage #

编写通用上传函数，生成唯一文件名避免冲突：

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
import { v4 as uuidv4 } from 'uuid';

const uploadImageToStorage = async (imageUri) => {
  const storage = getStorage();
  // 生成唯一文件名：uuid + 原文件后缀
  const fileExtension = imageUri.split('.').pop();
  const fileName = `${uuidv4()}.${fileExtension}`;
  const storageRef = ref(storage, `uploads/${fileName}`);

  // 将本地URI转为Blob（Expo环境专属处理）
  const response = await fetch(imageUri);
  const blob = await response.blob();

  const uploadTask = uploadBytesResumable(storageRef, blob);

  return new Promise((resolve, reject) => {
    uploadTask.on('state_changed',
      (snapshot) => {
        // 可选：添加上传进度监听，比如 snapshot.bytesTransferred / snapshot.totalBytes
      },
      (error) => reject(error),
      async () => {
        const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
        resolve(downloadURL);
      }
    );
  });
};

3. 批量上传并写入Firestore #

批量处理选中的图片，收集所有下载URL后写入Firestore集合：

import { getFirestore, collection, addDoc } from 'firebase/firestore';

const uploadImagesAndSaveToFirestore = async () => {
  const selectedImages = await pickMultipleImages();
  if (selectedImages.length === 0) return;

  try {
    // 并行上传所有图片，提升效率
    const downloadURLs = await Promise.all(
      selectedImages.map(img => uploadImageToStorage(img.uri))
    );

    // 写入Firestore集合，示例集合名为"imagePosts"
    const db = getFirestore();
    await addDoc(collection(db, 'imagePosts'), {
      imageUrls: downloadURLs,
      createdAt: new Date(),
      // 可添加自定义字段：上传者ID、图片描述等
    });

    alert('上传成功');
  } catch (error) {
    console.error('上传失败:', error);
    alert(`上传出错：${error.message}`);
  }
};

4. 调用示例 #

在组件中添加触发按钮：

import { Button } from 'react-native';

// 组件内使用
<Button title="选择并上传图片" onPress={uploadImagesAndSaveToFirestore} />

关键注意事项 #

• 开发阶段可临时设置Firebase Storage规则为allow read, write: if true;，生产环境需配置基于用户身份的安全规则
• 若需支持部分失败不中断整体上传，可将Promise.all替换为循环处理并捕获单张错误
• 可在uploadTask.on的回调中添加进度条，优化用户体验

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