Cloud Storage for Firebase 可让您快速轻松地从 Firebase 提供和管理的Cloud Storage 存储桶下载文件。
创建参考
要下载文件,请先创建对要下载的文件的 Cloud Storage 引用。
您可以通过将子路径附加到 Cloud Storage 存储桶的根目录来创建引用,也可以从引用 Cloud Storage 中对象的现有gs://
或https://
URL 创建引用。
Web version 9
import { getStorage, ref } from "firebase/storage"; // Create a reference with an initial file path and name const storage = getStorage(); const pathReference = ref(storage, 'images/stars.jpg'); // Create a reference from a Google Cloud Storage URI const gsReference = ref(storage, 'gs://bucket/images/stars.jpg'); // Create a reference from an HTTPS URL // Note that in the URL, characters are URL escaped! const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');
Web version 8
// Create a reference with an initial file path and name var storage = firebase.storage(); var pathReference = storage.ref('images/stars.jpg'); // Create a reference from a Google Cloud Storage URI var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg'); // Create a reference from an HTTPS URL // Note that in the URL, characters are URL escaped! var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');
通过 URL 下载数据
您可以通过对 Cloud Storage 引用调用getDownloadURL()
方法来获取文件的下载 URL。
Web version 9
import { getStorage, ref, getDownloadURL } from "firebase/storage"; const storage = getStorage(); getDownloadURL(ref(storage, 'images/stars.jpg')) .then((url) => { // `url` is the download URL for 'images/stars.jpg' // This can be downloaded directly: const xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = (event) => { const blob = xhr.response; }; xhr.open('GET', url); xhr.send(); // Or inserted into an <img> element const img = document.getElementById('myimg'); img.setAttribute('src', url); }) .catch((error) => { // Handle any errors });
Web version 8
storageRef.child('images/stars.jpg').getDownloadURL() .then((url) => { // `url` is the download URL for 'images/stars.jpg' // This can be downloaded directly: var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = (event) => { var blob = xhr.response; }; xhr.open('GET', url); xhr.send(); // Or inserted into an <img> element var img = document.getElementById('myimg'); img.setAttribute('src', url); }) .catch((error) => { // Handle any errors });
直接从 SDK 下载数据
从 9.5 及更高版本开始,SDK 提供以下函数供直接下载:
使用这些函数,您可以绕过从 URL 下载,而是在您的代码中返回数据。这允许通过Firebase Security Rules进行更细粒度的访问控制。
CORS配置
要直接在浏览器中下载数据,您必须配置 Cloud Storage 存储桶以进行跨源访问 (CORS)。这可以使用gsutil
命令行工具完成,您可以从此处安装该工具。
如果您不想要任何基于域的限制(最常见的情况),请将此 JSON 复制到名为cors.json
的文件:
[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ]
运行gsutil cors set cors.json gs://<your-cloud-storage-bucket>
以部署这些限制。
有关详细信息,请参阅Google 云存储文档。
处理错误
下载时可能会出现错误的原因有很多,包括文件不存在,或者用户无权访问所需文件。有关错误的更多信息,请参阅文档的处理错误部分。
完整示例
下面显示了带有错误处理的下载的完整示例:
Web version 9
import { getStorage, ref, getDownloadURL } from "firebase/storage"; // Create a reference to the file we want to download const storage = getStorage(); const starsRef = ref(storage, 'images/stars.jpg'); // Get the download URL getDownloadURL(starsRef) .then((url) => { // Insert url into an <img> tag to "download" }) .catch((error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors 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; } });
Web version 8
// Create a reference to the file we want to download var starsRef = storageRef.child('images/stars.jpg'); // Get the download URL starsRef.getDownloadURL() .then((url) => { // Insert url into an <img> tag to "download" }) .catch((error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors 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; } });
您还可以获取或更新存储在 Cloud Storage 中的文件的元数据。