使用React Native（Expo）向Firebase批量上传图片遇难题

前置准备 #

确保已安装依赖：

npx expo install expo-image-picker firebase

并在Expo项目中配置好Firebase（初始化firebase.js文件，包含Storage和Firestore的配置）。

完整实现代码 #

import { useState } from 'react';
import { Button, View, Text, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
import { getFirestore, collection, addDoc } from 'firebase/firestore';
import { firebaseApp } from './firebase'; // 你的Firebase初始化文件

const storage = getStorage(firebaseApp);
const db = getFirestore(firebaseApp);

export default function ImageUploadScreen() {
  const [selectedImages, setSelectedImages] = useState([]);
  const [uploadProgress, setUploadProgress] = useState(0);

  // 申请图片权限
  const requestPermissions = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('权限不足', '需要访问相册权限才能上传图片');
      return false;
    }
    return true;
  };

  // 批量选择图片
  const pickMultipleImages = async () => {
    const hasPermission = await requestPermissions();
    if (!hasPermission) return;

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

    if (!result.canceled) {
      setSelectedImages(result.assets);
    }
  };

  // 单张图片上传到Storage并返回下载链接
  const uploadImageToStorage = async (image) => {
    return new Promise((resolve, reject) => {
      const fileName = `${Date.now()}-${image.fileName}`;
      const storageRef = ref(storage, `uploads/${fileName}`);
      const uploadTask = uploadBytesResumable(storageRef, image.uri);

      uploadTask.on('state_changed', 
        (snapshot) => {
          const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
          setUploadProgress(progress);
        },
        (error) => {
          reject(error);
        },
        async () => {
          const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
          resolve({
            url: downloadURL,
            fileName: fileName,
            originalName: image.fileName,
          });
        }
      );
    });
  };

  // 批量上传并同步到Firestore
  const batchUpload = async () => {
    if (selectedImages.length === 0) {
      Alert.alert('提示', '请先选择要上传的图片');
      return;
    }

    try {
      // 批量上传所有图片到Storage
      const uploadPromises = selectedImages.map(image => uploadImageToStorage(image));
      const uploadResults = await Promise.all(uploadPromises);

      // 将上传结果批量添加到Firestore集合
      const addDocPromises = uploadResults.map(result => 
        addDoc(collection(db, 'images'), {
          imageUrl: result.url,
          fileName: result.fileName,
          originalName: result.originalName,
          createdAt: new Date(),
        })
      );
      await Promise.all(addDocPromises);

      Alert.alert('成功', '所有图片上传并同步到数据库完成');
      setSelectedImages([]);
      setUploadProgress(0);
    } catch (error) {
      Alert.alert('失败', `上传过程出错：${error.message}`);
      setUploadProgress(0);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
      <Button title="选择多张图片" onPress={pickMultipleImages} />
      {selectedImages.length > 0 && (
        <Text style={{ marginVertical: 10 }}>已选择 {selectedImages.length} 张图片</Text>
      )}
      {uploadProgress > 0 && (
        <Text style={{ marginVertical: 10 }}>上传进度：{uploadProgress}%</Text>
      )}
      {selectedImages.length > 0 && (
        <Button title="开始批量上传" onPress={batchUpload} />
      )}
    </View>
  );
}

关键注意事项 #

• Firebase版本兼容：当前代码基于Firebase v9+模块化API，避免了过时的命名空间写法（如firebase.storage()），确保安装的Firebase版本为9.x或以上。
• Expo ImagePicker配置：在app.json中添加相册权限配置（iOS需NSPhotoLibraryUsageDescription，Android需READ_EXTERNAL_STORAGE权限），否则会导致权限申请失败。
• 错误处理：代码包含权限校验、上传失败捕获，若需容错可改用Promise.allSettled替代Promise.all，避免单个图片上传失败中断整个批量任务。
• Storage路径设计：示例用uploads/${fileName}作为存储路径，可根据业务需求调整（如按用户ID分文件夹）。

常见问题排查 #

• 上传无响应：检查Firebase控制台的Storage规则，开发阶段可临时设置为allow read, write: if true;，生产环境需改为基于用户认证的规则。
• 下载链接无效：确认Storage中的文件已成功上传，且Firestore中存储的URL正确。
• Expo打包问题：EAS构建时需确保eas.json配置了正确权限，且ImagePicker打包配置无误。

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