如何從 Firebase 存儲下載整個文件夾？

Question

我想從 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 下載整個文件夾？

Answer 1

您可以使用gsutil下載整個存儲桶

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

Answer 2

Firebase 存儲中沒有用於下載文件夾中所有文件的 API。 您必須逐個下載文件，或創建一個包含所有文件的 zip 文件。

正如Lahiru 的回答所示，它可以通過gsutils來完成，但這是一個服務器端操作——而不是你在客戶端應用程序中運行的東西。

有關的：

• 如何在 Firebase 應用中獲取 Cloud Storage 中所有文件的列表？

Answer 3

Windows的命令gustil !!!

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

使用適用於 PowerShell 的雲工具

REF 安裝窗口 >> https://cloud.google.com/storage/docs/gsutil_install

Answer 4

您可以通過創建一個 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');
};

Answer 5

有關在 zip 文件中包含子文件夾的遞歸解決方案，請參閱以下示例。 您將實例化一個 jszip object，等待 function 的承諾，它壓縮文件並遍歷目錄，然后保存 zip。 如果內容是文件（“項目”），則將其壓縮到 jszip object 中。 如果是文件夾（“前綴”），則使用新的子路徑再次調用 function，傳入相同的 jszip object。 為了進一步改進，如果您的內容對於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);
};