在网页上下载文件

Cloud Storage 可让开发者从 Firebase 提供和管理的 Google Cloud Storage 存储分区快速轻松地下载文件。

创建引用

要下载某个文件,请先为要下载的文件创建一个 Cloud Storage 引用

您可以通过将子路径附加到存储区根目录来创建引用,或者通过引用 Cloud Storage 中的对象的现有 gs://https:// 网址创建引用。

// 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');

通过网址下载数据

您可以对存储引用调用 getDownloadURL() 方法,获取文件的下载网址。

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
  // `url` is the download URL for 'images/stars.jpg'

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

CORS 配置

要直接在浏览器中下载数据,您必须为 Cloud Storage 存储分区配置跨域资源共享 (CORS) 访问权限。您可以使用 gsutil 命令行工具(点击此处安装)执行这一操作。

如果您不想实施任何基于网域的限制(最常见的情况),请将下面的 JSON 复制到名为 cors.json 的文件中:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

运行 gsutil cors set cors.json gs://<your-cloud-storage-bucket>,部署这些限制。

如需了解详情,请参阅 Cloud Storage 文档

处理错误

导致下载出错的原因有很多,包括文件不存在或用户无权访问所需文件。如需了解有关错误的详细信息,请参阅文档的处理错误部分。

完整示例

下面是一个完整的下载示例(包含错误处理):

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL().then(function(url) {
  // Insert url into an <img> tag to "download"
}).catch(function(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 中的文件,您还可以获取或更新元数据

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面