将多个图像从Firebase数据库保存到本地存储

import React, { useEffect } from 'react';
import axios from 'axios';

const ImageDownloader = () => {
  useEffect(() => {
    // Connect to Firebase and get image URLs
    // Replace 'firebaseUrl' with your Firebase database URL
    axios.get('firebaseUrl/images.json')
      .then(response => {
        const imageUrls = response.data;

        // Download and save each image
        imageUrls.forEach(url => {
          axios.get(url, { responseType: 'blob' })
            .then(response => {
              const imageBlob = response.data;
              const imageUrl = URL.createObjectURL(imageBlob);

              // Save image to local storage
              saveImageLocally(imageUrl);
            })
            .catch(error => {
              console.error('Failed to download image:', error);
            });
        });
      })
      .catch(error => {
        console.error('Failed to fetch image URLs:', error);
      });
  }, []);

  const saveImageLocally = (imageUrl) => {
    // Replace 'images' with the appropriate folder path in your local storage
    const folderPath = 'images';
    const fileName = imageUrl.split('/').pop();

    fetch(imageUrl)
      .then(response => response.blob())
      .then(blob => {
        const file = new File([blob], fileName, { type: blob.type });
        const fileUrl = URL.createObjectURL(file);

        // Save file to local storage
        const link = document.createElement('a');
        link.href = fileUrl;
        link.download = fileName;
        link.click();
      })
      .catch(error => {
        console.error('Failed to save image locally:', error);
      });
  };

  return <div>Image Downloader</div>;
};

export default ImageDownloader;