创建 Cloud Storage 引用 (Web)

您的文件存储在 Cloud Storage 存储桶中。此存储桶中的文件以分层结构存储，就像本地硬盘中的文件系统或 Firebase Realtime Database 中的数据一样。通过创建指向文件的引用，您的应用便可以访问相应文件。然后，借助所创建的这些引用，您可以上传或下载数据、获取或更新元数据，也可以删除文件。引用可以指向特定的文件，也可以指向层次结构中更高层级的节点。

如果您使用过 Firebase Realtime Database，应当很熟悉这些路径。只不过，您的文件数据存储在 Cloud Storage 中，而不是 Realtime Database 中。

创建引用

如需上传或下载文件、删除文件，或者获取或更新元数据，您必须创建对所要操作文件的引用。引用可以看作是指向云端文件的指针。由于引用属于轻型项目，因此您可以根据需要创建任意多个引用，而且它们可重复用于多个操作。

如需创建引用，请使用 getStorage() 获取 Storage 服务的实例，然后使用该服务作为参数来调用 ref()。此引用指向 Cloud Storage 存储桶的根目录。

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);
storage_create_ref.js

// 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();
create-reference.js

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

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"
storage_create_ref_child.js

// 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"
create-reference.js

通过引用进行导航

您还可以使用 parent 和 root 属性在文件层次结构中向上导航。parent 可以向上导航一级，而 root 可以一直导航至根目录。

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
storage_navigate_ref.js

// 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
create-reference.js

child()、parent 和 root 可以链接在一起并链接多次，每次都会返回一个引用。root 的 parent 例外，它是 null。

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;
storage_navigate_ref_chain.js

// 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;
create-reference.js

引用的属性

您可以使用 fullPath、name 和 bucket 属性查看引用，以便更好地了解它们指向的文件。这些属性可以获取文件的完整路径、文件的名称，以及存储文件的存储桶。

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;
storage_ref_properties.js

// 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;
create-reference.js

引用限制

引用路径和名称可以包含有效 Unicode 字符的任意序列，但也必须遵循一些限制，具体包括：

1. 使用 UTF-8 编码时，reference.fullPath 的总长度必须介于 1 到 1024 个字节之间。
2. 不得包含回车符或换行符。
3. 避免使用 #、[、]、* 或 ?，因为这些字符在 Firebase Realtime Database 或 gsutil 等其他工具中无法正常显示。

完整示例

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;
storage_ref_full_example.js

// 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;
create-reference.js

接下来，我们将了解如何向 Cloud Storage 上传文件。