JS+Firebase多图上传：需异步等待URL生成后写入数据库

Let's break down why your current code isn't waiting for all image URLs to be fetched before saving to the database, then fix it properly with async/await.

The Core Issue #

Your forEachImage function resolves immediately after starting the image processing loop, not waiting for all the async operations (generating blobs, uploading to storage, fetching download URLs) to finish. That's why imageURLS is still empty or incomplete when you try to save to the database.

Step-by-Step Fix #

We need to track every async image operation and wait for all of them to complete before proceeding. Here's the revised code with clear explanations:

createTool ({ commit }, payload) { 
  // Handle single image processing: returns a promise that resolves to the download URL
  async function processImage(file) {
    return new Promise((resolve, reject) => {
      file.generateBlob(blob => {
        if (!blob) {
          reject(new Error('Failed to generate blob for image'));
          return;
        }
        // Generate unique filename for storage
        const rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase();
        const imageRef = firebase.storage().ref('toolImages/').child(rand);
        
        // Upload blob, then fetch the download URL
        imageRef.put(blob)
          .then(() => imageRef.getDownloadURL())
          .then(downloadURL => {
            console.log('Download URL obtained:', downloadURL);
            resolve(downloadURL);
          })
          .catch(error => {
            console.error('Image upload failed:', error);
            reject(error);
          });
      });
    });
  }

  async function uploadEachImage () {
    try {
      // Wait for ALL images to be processed and their URLs collected
      const imageURLS = await Promise.all(payload.croppas.map(processImage));
      console.log('All image URLs ready:', imageURLS);

      const mergedToolData = { title: payload.title, URLS: imageURLS };
      console.log('Uploading tool data to database...');
      
      // Wait for database save to complete before committing to Vuex
      const data = await firebase.database().ref('tools').push(mergedToolData);
      const key = data.key;
      commit('createTool', { title: payload.title, URLS: imageURLS, id: key });
      
      console.log('Tool saved successfully with ID:', key);
    } catch (error) {
      console.error('Failed to create tool:', error);
      // Add user-facing error handling here (e.g., show a toast notification)
    }
  }

  uploadEachImage();
}

Key Changes Explained #

• Single Image Promise: The processImage function encapsulates all async work for one image, returning a promise that resolves with the download URL (or rejects on failure). This makes tracking each image's status straightforward.
• Promise.all for Parallel Operations: Instead of using forEach (which doesn't wait for async tasks), we use map to convert each image into a processing promise, then await Promise.all to wait for all of them to finish. This guarantees we have every URL before moving to the database step.
• Cleaner State Management: We removed the global imageURLS array and collect URLs directly from Promise.all, eliminating race conditions and making the code easier to follow.
• Proper Error Handling: Added try/catch blocks to handle failures in image processing or database saves, so you can respond gracefully instead of silently failing.
• Await Database Write: We also await the database push operation to ensure it completes before committing to Vuex, keeping the entire flow consistent and predictable.

Why This Works #

Promise.all waits for every promise in the array to resolve, so we never proceed to save the tool data until all images are uploaded and their URLs are fetched. No timeout hacks required—this is the standard async/await pattern for handling parallel async tasks.

内容的提问来源于stack exchange，提问作者Mr. Wilhelm