javascript 如何从Firebase Storage下载整个文件夹？

guz6ccqo 于 2023-10-14 发布在 Java

关注(0)|答案(6)|浏览(211)

我想从Firebase存储中下载整个文件夹。我可以使用DownloadURL下载单个文件，如下所示，但它不适用于文件夹。

var storageRef = firebase.storage().ref();
// Create a reference to the file we want to download
var starsRef = storageRef.child(path);
// Get the download URL
starsRef.getDownloadURL().then(function(url) {
  // Insert url into an <img> tag to "download"
  ImageUrl = url;
  console.log(ImageUrl);
}).catch(function(error) {
  switch (error.code) {
    case 'storage/object_not_found':
      // File doesn't exist
      break;
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;
    case 'storage/canceled':
      // User canceled the upload
      break;
    case 'storage/unknown':
      // Unknown error occurred, inspect the server response
      break;
  }
});

如何从Firebase下载整个文件夹？

JavaScript

来源：https://stackoverflow.com/questions/41461337/how-to-download-entire-folder-from-firebase-storage

6条答案

按热度按时间

zf9nrax11#

您可以使用gsutil下载整个存储桶

gsutil -m cp -R gs://<bucket_name> .

赞(0）回复(0）举报 2023-10-14

8wtpewkr2#

Firebase Storage中没有用于下载文件夹中所有文件的API。您必须逐一下载文件，或创建包含所有文件的zip文件。
正如Lahiru's answer所示，它可以用gsutils来完成，但这是一个服务器端操作，而不是在客户端应用程序中运行的操作。
相关信息：

How to get a list of all files in Cloud Storage in a Firebase app?

赞(0）回复(0）举报 2023-10-14

mm5n2pyu3#

命令gustil用于Windows！！！

gsutil cp -r gs://<bucket_name>.appspot.com/OBJECT_NAME "D:\path"

为PowerShell使用云工具
安装windows >> https://cloud.google.com/storage/docs/gsutil_install的参考

赞(0）回复(0）举报 2023-10-14

uwopmtnx4#

您可以通过创建一个zip文件来下载该文件夹。
下面是一个示例函数：

import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import {
  getStorage,
  listAll,
  ref,
  getDownloadURL,
  getMetadata,
} from 'firebase/storage';
import { auth } from '../../Firebase';
export const downloadFolderAsZip = async () => {
  const jszip = new JSZip();
  const storage = getStorage();
  const folderRef = ref(
    storage,
    'images'
  );
  const folder = await listAll(folderRef);
  const promises = folder.items
    .map(async (item) => {
      const file = await getMetadata(item);
      const fileRef = ref(storage, item.fullPath);
      const fileBlob = await getDownloadURL(fileRef).then((url) => {
        return fetch(url).then((response) => response.blob());
      });
      jszip.file(file.name, fileBlob);
    })
    .reduce((acc, curr) => acc.then(() => curr), Promise.resolve());
  await promises;
  const blob = await jszip.generateAsync({ type: 'blob' });
  saveAs(blob, 'download.zip');
};

展开查看全部

赞(0）回复(0）举报 2023-10-14

kse8i1jr5#

有关在zip文件中包含JavaScript的递归解决方案，请参见下面的示例。您将示例化一个jszip对象，等待来自压缩文件并遍历目录的函数的promise，然后保存压缩文件。如果内容是一个文件（“item”），它将被压缩到jszip对象中。如果它是一个文件夹（“prefix”），函数将再次调用，并使用新的子路径，传入相同的jszip对象。为了进一步改进，如果您的内容对于listAll来说太多，您可能希望使用list和分页来获取内容，因为listAll限制了检索。

import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import {
  getStorage, ref, getBlob, listAll,
} from "firebase/storage";
const addFilesFromDirectoryToZip = async (directoryPath = "", zip) => {
  const storage = getStorage();
 
  const directoryContentsRef = ref(
    storage,
    directoryPath
  );
  const directoryContents = await listAll(directoryContentsRef);
  for (const file of directoryContents.items) {
    const fileRef = ref(storage, file.fullPath);
    const fileBlob = await getBlob(fileRef)
    zip.file(file.fullPath, fileBlob);
  }
  for (const folder of directoryContents.prefixes) {
    await addFilesFromDirectoryToZip(folder.fullPath, zip);
  };
};
export const downloadFolderAsZip = async (directoryPath = "") => {
  const zip = new JSZip();
  await addFilesFromDirectoryToZip(directoryPath, zip);
  const blob = await zip.generateAsync({ type: "blob" });
  const name = directoryPath.split('/').pop();
  saveAs(blob, name);
};

展开查看全部

赞(0）回复(0）举报 2023-10-14

h9vpoimq6#

根据上面的建议，我编写了.html脚本。

<!DOCTYPE html>
<html>
<head>
  <title>Download Firebase Storage Folder</title>
</head>
<body>
  <h1>Download Firebase Storage Folder</h1>
  <button id="downloadButton">Download Folder</button>
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
  <script>
    // Initialize Firebase with your configuration
    const firebaseConfig = {
            apiKey: 'apiKey....', //replace
            authDomain: 'YOUR_AUTH_DOMAIN',
            projectId: 'YOUR_PROJECT_ID',
            storageBucket: 'YOUR_STORAGE_BUCKET',
            messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
            appId: 'YOUR_APP_ID',
    };
    // Initialize Firebase
    const app = firebase.initializeApp(firebaseConfig);
    // Define the downloadFolderAsZip function here
    const downloadFolderAsZip = async () => {
      console.log("Starting folder download...");
      const jszip = new JSZip();
      const storage = firebase.storage(app);
      const folderName = '/[Your folder name]'; //Your folder name 
      try {
        const folderRef = storage.ref(folderName);
        console.log("Folder reference created:", folderRef);
        const downloadFiles = async (folderRef, path) => {
          const folder = await storage.ref(folderRef.fullPath).listAll();
          console.log("Folder:", path);
          console.log("Files in the folder:", folder.items);
          const promises = folder.items.map(async (item) => {
            console.log("Downloading file:", item.name);
            const file = await item.getMetadata();
            const fileRef = storage.ref(item.fullPath);
            const fileBlob = await fileRef.getDownloadURL().then((url) => {
              return fetch(url).then((response) => {
                if (!response.ok) {
                  console.error("Failed to fetch file:", item.name);
                  throw new Error('Failed to fetch file');
                }
                return response.blob();
              });
            });
            jszip.folder(path).file(item.name, fileBlob);
          });
          await Promise.all(promises);
          for (const subfolder of folder.prefixes) {
            await downloadFiles(subfolder, `${path}${subfolder.name}/`);
          }
        };
        await downloadFiles(folderRef, '');
        console.log("Number of files added to the ZIP:", jszip.files.length);
        if (jszip.files.length === 0) {
          console.log("ZIP is empty.");
          return;
        }
        const blob = await jszip.generateAsync({ type: 'blob' });
        saveAs(blob, 'download.zip');
        console.log("Download completed.");
      } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while downloading the folder.');
      }
    };
    // Add an event listener to the "Download Folder" button
    const downloadButton = document.getElementById('downloadButton');
    downloadButton.addEventListener('click', () => {
      downloadFolderAsZip();
    });
  </script>
</body>
</html>

1.填写证件
1.填写文件夹名称
1.保存
1.用浏览器打开.html文件
1.很高兴

展开查看全部

赞(0）回复(0）举报 2023-10-14

我来回答

javascript 如何从Firebase Storage下载整个文件夹？

6条答案

相关问题

热门标签

最新问答