获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

在 Web 上创建 Cloud Storage 引用

您的文件存储在Cloud Storage 存储分区中。此存储桶中的文件以分层结构呈现,就像本地硬盘上的文件系统或 Firebase 实时数据库中的数据一样。通过创建对文件的引用,您的应用程序可以访问它。然后,这些引用可用于上传或下载数据、获取或更新元数据或删除文件。引用可以指向特定文件或层次结构中的更高级别节点。

如果您使用过Firebase 实时数据库,这些路径对您来说应该非常熟悉。但是,您的文件数据存储在 Cloud Storage 中,而不是实时数据库中。

创建参考

为了上传或下载文件、删除文件或获取或更新元数据,您必须创建对要操作的文件的引用。可以将引用视为指向云中文件的指针。引用是轻量级的,因此您可以根据需要创建任意数量的引用,并且它们还可以重复用于多个操作。

要创建引用,请使用getStorage()获取 Storage 服务的实例,然后使用该服务作为参数调用ref() 。此引用指向您的 Cloud Storage 存储分区的根。

Web version 9

import { getStorage, ref } from "firebase/storage";

// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage();

// Create a storage reference from our storage service
const storageRef = ref(storage);

Web version 8

// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();

// Create a storage reference from our storage service
var storageRef = storage.ref();

您可以通过在调用ref()时将此路径作为第二个参数传递来创建对树中较低位置的引用,例如'images/space.jpg'

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();

// Create a child reference
const imagesRef = ref(storage, 'images');
// imagesRef now points to 'images'

// Child references can also take paths delimited by '/'
const spaceRef = ref(storage, 'images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"

Web version 8

// Create a child reference
var imagesRef = storageRef.child('images');
// imagesRef now points to 'images'

// Child references can also take paths delimited by '/'
var spaceRef = storageRef.child('images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"

您还可以使用parentroot属性向上导航文件层次结构。 parent向上导航一级,而root一直导航到顶部。

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Parent allows us to move to the parent of a reference
const imagesRef = spaceRef.parent;
// imagesRef now points to 'images'

// Root allows us to move all the way back to the top of our bucket
const rootRef = spaceRef.root;
// rootRef now points to the root

Web version 8

// Parent allows us to move to the parent of a reference
var imagesRef = spaceRef.parent;
// imagesRef now points to 'images'

// Root allows us to move all the way back to the top of our bucket
var rootRef = spaceRef.root;
// rootRef now points to the root

child()parentroot可以多次链接在一起,因为每个都返回一个引用。例外是rootparent级,它是null

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// References can be chained together multiple times
const earthRef = ref(spaceRef.parent, 'earth.jpg');
// earthRef points to 'images/earth.jpg'

// nullRef is null, since the parent of root is null
const nullRef = spaceRef.root.parent;

Web version 8

// References can be chained together multiple times
var earthRef = spaceRef.parent.child('earth.jpg');
// earthRef points to 'images/earth.jpg'

// nullRef is null, since the parent of root is null
var nullRef = spaceRef.root.parent;

参考属性

您可以使用fullPathnamebucket属性检查引用以更好地理解它们指向的文件。这些属性获取文件的完整路径、文件名和存储文件的存储桶。

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;

// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;

// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;

Web version 8

// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;

// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;

// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;

参考文献的限制

引用路径和名称可以包含任何有效的 Unicode 字符序列,但有一些限制,包括:

  1. UTF-8 编码时, reference.fullPath的总长度必须在 1 到 1024 个字节之间。
  2. 没有回车或换行字符。
  3. 避免使用#[]*? ,因为这些不能很好地与Firebase 实时数据库gsutil等其他工具配合使用。

完整示例

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();

// Points to the root reference
const storageRef = ref(storage);

// Points to 'images'
const imagesRef = ref(storageRef, 'images');

// Points to 'images/space.jpg'
// Note that you can use variables to create child values
const fileName = 'space.jpg';
const spaceRef = ref(imagesRef, fileName);

// File path is 'images/space.jpg'
const path = spaceRef.fullPath;

// File name is 'space.jpg'
const name = spaceRef.name;

// Points to 'images'
const imagesRefAgain = spaceRef.parent;

Web version 8

// Points to the root reference
var storageRef = firebase.storage().ref();

// Points to 'images'
var imagesRef = storageRef.child('images');

// Points to 'images/space.jpg'
// Note that you can use variables to create child values
var fileName = 'space.jpg';
var spaceRef = imagesRef.child(fileName);

// File path is 'images/space.jpg'
var path = spaceRef.fullPath;

// File name is 'space.jpg'
var name = spaceRef.name;

// Points to 'images'
var imagesRef = spaceRef.parent;

接下来,让我们学习如何将文件上传到 Cloud Storage。