使用JavaScript批量上传10000张图片至Firebase Storage并同步URL到Firestore

Got it, let's break down how to build this solution with JavaScript, including best practices for handling your 10,000-image bulk upload smoothly.

First, make sure you're using Firebase's modular SDK (the recommended approach these days). Install the necessary packages if you're using npm:

npm install firebase

Then initialize Firebase in your code:

import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { getFirestore, doc, setDoc } from "firebase/firestore";

// Your Firebase config (copy this from your Firebase console)
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase services
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
const firestore = getFirestore(app);

Create an async function that handles a single image: it uploads to Storage, grabs the persistent download URL, then creates a Firestore document using the filename as the document ID.

/**
 * Uploads an image to Firebase Storage and creates a corresponding Firestore document
 * @param {File} file - The image file to upload
 */
async function uploadImageAndCreateDoc(file) {
  try {
    // 1. Create a Storage reference for the file (store in an "images" folder)
    const storageRef = ref(storage, `images/${file.name}`);
    
    // 2. Upload the file to Storage
    await uploadBytes(storageRef, file);
    
    // 3. Get the persistent download URL
    const downloadURL = await getDownloadURL(storageRef);
    
    // 4. Create Firestore document (use filename as doc ID in "imageMetadata" collection)
    await setDoc(doc(firestore, "imageMetadata", file.name), {
      downloadURL: downloadURL,
      fileName: file.name,
      uploadTimestamp: new Date() // Optional: add timestamp for tracking
    });
    
    console.log(`Successfully processed: ${file.name}`);
  } catch (error) {
    console.error(`Failed to process ${file.name}:`, error);
    // Optionally, log failed files to retry later
  }
}

You can't upload all 10k images at once—Firebase has rate limits that will block you. Instead, process them in batches with small delays between batches to stay within limits.

/**
 * Processes a batch of images with a delay between batches
 * @param {File[]} imageFiles - Array of image files to upload
 * @param {number} batchSize - Number of files per batch (start with 10-20)
 * @param {number} delayMs - Delay between batches in milliseconds
 */
async function processBulkImages(imageFiles, batchSize = 15, delayMs = 1000) {
  for (let i = 0; i < imageFiles.length; i += batchSize) {
    const batch = imageFiles.slice(i, i + batchSize);
    
    // Process all files in the current batch
    await Promise.all(batch.map(file => uploadImageAndCreateDoc(file)));
    
    // Add a delay before the next batch to avoid throttling
    if (i + batchSize < imageFiles.length) {
      console.log(`Waiting ${delayMs}ms before next batch...`);
      await new Promise(resolve => setTimeout(resolve, delayMs));
    }
  }
  
  console.log("All images processed!");
}

// Example usage: if you have an array of File objects (e.g., from an input or directory read)
// processBulkImages(yourImageFilesArray);

• Security Rules: Make sure your Firebase Storage and Firestore rules allow uploads/writes. For testing, you can temporarily set open rules (but lock them down for production!):
  • Storage rules example:

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /images/{allPaths=**} {
          allow read, write: if request.auth != null; // Or use service account for server-side
        }
      }
    }
    

  • Firestore rules example:

    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /imageMetadata/{docId} {
          allow read, write: if request.auth != null;
        }
      }
    }
    

• Persistent URLs: The getDownloadURL() returns a permanent URL as long as the file exists and your security rules allow access. No need to regenerate it unless you delete/replace the file.
• Error Recovery: Log failed files so you can retry them later—don't let one failed upload stop the entire batch.
• Quota Limits: Check Firebase's tier limits to ensure you don't hit storage or bandwidth caps. 800MB is well within most free tiers, but adjust batch size/delay if you hit rate limits.

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