创建 Cloud Storage 引用 (Web)
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
您的文件存储在 Cloud Storage 存储桶中。此存储桶中的文件以分层结构存储,就像本地硬盘中的文件系统或 Firebase Realtime Database 中的数据一样。通过创建指向文件的引用,您的应用便可以访问相应文件。然后,借助所创建的这些引用,您可以上传或下载数据、获取或更新元数据,也可以删除文件。引用可以指向特定的文件,也可以指向层次结构中更高层级的节点。
如果您使用过 Firebase Realtime Database,应当非常熟悉这些路径。只不过,您的文件数据存储在 Cloud Storage 中,而不是存储在 Realtime Database 中。
创建引用
如需上传或下载文件、删除文件,或者获取或更新元数据,您必须创建对所要操作文件的引用。引用可以看作是指向云端文件的指针。由于引用属于轻型项目,因此您可以根据需要创建任意多个引用,而且它们可重复用于多个操作。
如需创建引用,请使用 getStorage()
获取 Storage 服务的实例,然后使用该服务作为参数来调用 ref()
。此引用指向 Cloud Storage 存储桶的根目录。
Web
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
// 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
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
// 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"
通过引用进行导航
您还可以使用 parent
和 root
属性在文件层次结构中向上导航。parent
可以向上导航一级,而 root
可以一直导航至根目录。
Web
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
// 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()
、parent
和 root
可以链接在一起并链接多次,每次都会返回一个引用。root
的 parent
除外,因为它是 null
。
Web
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
// 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;
引用的属性
您可以使用 fullPath
、name
和 bucket
属性查看引用,以便更好地了解它们指向的文件。这些属性可以获取文件的完整路径、文件的名称,以及存储文件的存储分区。
Web
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
// 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 字符的任意序列,但也必须遵循一些限制,具体包括:
- 使用 UTF-8 编码时,
reference.fullPath
的总长度必须介于 1 到 1024 个字节之间。
- 不得包含回车符或换行符。
- 避免使用
#
、[
、]
、*
或 ?
,因为这些字符在 Firebase Realtime Database 或 gsutil 等其他工具中无法正常显示。
完整示例
Web
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
// 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。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-12。
[null,null,["最后更新时间 (UTC):2025-08-12。"],[],[],null,["\u003cbr /\u003e\n\nYour files are stored in a\n[Cloud Storage](//cloud.google.com/storage) bucket. The\nfiles in this bucket are presented in a hierarchical structure, just like the\nfile system on your local hard disk, or the data in the Firebase Realtime Database.\nBy creating a reference to a file, your app gains access to it. These references\ncan then be used to upload or download data, get or update metadata or delete\nthe file. A reference can either point to a specific file or to a higher level\nnode in the hierarchy.\n\nIf you've used the [Firebase Realtime Database](/docs/database), these paths should\nseem very familiar to you. However, your file data is stored in\nCloud Storage, **not** in the Realtime Database.\n\nCreate a Reference\n\nIn order to upload or download files, delete files, or get or update metadata,\nyou must create a reference to the file you want to operate on. A reference\ncan be thought of as a pointer to a file in the cloud. References are\nlightweight, so you can create as many as you need, and they are also reusable for\nmultiple operations.\n\nTo create a reference, get an instance of the Storage service using\n`getStorage()` then call `ref()` with the service as an argument.\nThis reference points to the root of your Cloud Storage bucket. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\n// Get a reference to the storage service, which is used to create references in your storage bucket\nconst storage = getStorage();\n\n// Create a storage reference from our storage service\nconst storageRef = ref(storage);https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_create_ref.js#L8-L14\n```\n\nWeb \n\n```javascript\n// Get a reference to the storage service, which is used to create references in your storage bucket\nvar storage = firebase.storage();\n\n// Create a storage reference from our storage service\nvar storageRef = storage.ref();https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L6-L10\n```\n\nYou can create a reference to a location lower in the tree,\nsay `'images/space.jpg'` by passing in this path as a second argument when\ncalling `ref()`. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\n\n// Create a child reference\nconst imagesRef = ref(storage, 'images');\n// imagesRef now points to 'images'\n\n// Child references can also take paths delimited by '/'\nconst spaceRef = ref(storage, 'images/space.jpg');\n// spaceRef now points to \"images/space.jpg\"\n// imagesRef still points to \"images\" \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_create_ref_child.js#L8-L19\n```\n\nWeb \n\n```javascript\n// Create a child reference\nvar imagesRef = storageRef.child('images');\n// imagesRef now points to 'images'\n\n// Child references can also take paths delimited by '/'\nvar spaceRef = storageRef.child('images/space.jpg');\n// spaceRef now points to \"images/space.jpg\"\n// imagesRef still points to \"images\" \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L18-L25\n```\n\nNavigate with References\n\nYou can also use the `parent` and `root` properties to navigate up the\nfile hierarchy. `parent` navigates up one level,\nwhile `root` navigates all the way to the top. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// Parent allows us to move to the parent of a reference\nconst imagesRef = spaceRef.parent;\n// imagesRef now points to 'images'\n\n// Root allows us to move all the way back to the top of our bucket\nconst rootRef = spaceRef.root;\n// rootRef now points to the root \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_navigate_ref.js#L8-L19\n```\n\nWeb \n\n```javascript\n// Parent allows us to move to the parent of a reference\nvar imagesRef = spaceRef.parent;\n// imagesRef now points to 'images'\n\n// Root allows us to move all the way back to the top of our bucket\nvar rootRef = spaceRef.root;\n// rootRef now points to the root \nhttps://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L33-L39\n```\n\n`child()`, `parent`, and `root` can be chained together multiple times, as\neach returns a reference. The exception is the `parent` of `root`, which\nis `null`. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// References can be chained together multiple times\nconst earthRef = ref(spaceRef.parent, 'earth.jpg');\n// earthRef points to 'images/earth.jpg'\n\n// nullRef is null, since the parent of root is null\nconst nullRef = spaceRef.root.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_navigate_ref_chain.js#L8-L18\n```\n\nWeb \n\n```javascript\n// References can be chained together multiple times\nvar earthRef = spaceRef.parent.child('earth.jpg');\n// earthRef points to 'images/earth.jpg'\n\n// nullRef is null, since the parent of root is null\nvar nullRef = spaceRef.root.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L47-L52\n```\n\nReference Properties\n\nYou can inspect references to better understand the files they point to\nusing the `fullPath`, `name`, and `bucket` properties. These properties\nget the full path of the file, the name of the file,\nand the bucket the file is stored in. \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\nconst spaceRef = ref(storage, 'images/space.jpg');\n\n// Reference's path is: 'images/space.jpg'\n// This is analogous to a file path on disk\nspaceRef.fullPath;\n\n// Reference's name is the last segment of the full path: 'space.jpg'\n// This is analogous to the file name\nspaceRef.name;\n\n// Reference's bucket is the name of the storage bucket where files are stored\nspaceRef.bucket;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_ref_properties.js#L8-L22\n```\n\nWeb \n\n```javascript\n// Reference's path is: 'images/space.jpg'\n// This is analogous to a file path on disk\nspaceRef.fullPath;\n\n// Reference's name is the last segment of the full path: 'space.jpg'\n// This is analogous to the file name\nspaceRef.name;\n\n// Reference's bucket is the name of the storage bucket where files are stored\nspaceRef.bucket;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L60-L69\n```\n\nLimitations on References\n\nReference paths and names can contain any sequence of valid Unicode characters,\nbut certain restrictions are imposed including:\n\n1. Total length of `reference.fullPath` must be between 1 and 1024 bytes when UTF-8 encoded.\n2. No Carriage Return or Line Feed characters.\n3. Avoid using `#`, `[`, `]`, `*`, or `?`, as these do not work well with other tools such as the [Firebase Realtime Database](/docs/database) or [gsutil](https://cloud.google.com/storage/docs/gsutil).\n\nFull Example \n\nWeb \n\n```javascript\nimport { getStorage, ref } from \"firebase/storage\";\n\nconst storage = getStorage();\n\n// Points to the root reference\nconst storageRef = ref(storage);\n\n// Points to 'images'\nconst imagesRef = ref(storageRef, 'images');\n\n// Points to 'images/space.jpg'\n// Note that you can use variables to create child values\nconst fileName = 'space.jpg';\nconst spaceRef = ref(imagesRef, fileName);\n\n// File path is 'images/space.jpg'\nconst path = spaceRef.fullPath;\n\n// File name is 'space.jpg'\nconst name = spaceRef.name;\n\n// Points to 'images'\nconst imagesRefAgain = spaceRef.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/storage-next/create-reference/storage_ref_full_example.js#L8-L30\n```\n\nWeb \n\n```javascript\n// Points to the root reference\nvar storageRef = firebase.storage().ref();\n\n// Points to 'images'\nvar imagesRef = storageRef.child('images');\n\n// Points to 'images/space.jpg'\n// Note that you can use variables to create child values\nvar fileName = 'space.jpg';\nvar spaceRef = imagesRef.child(fileName);\n\n// File path is 'images/space.jpg'\nvar path = spaceRef.fullPath;\n\n// File name is 'space.jpg'\nvar name = spaceRef.name;\n\n// Points to 'images'\nvar imagesRef = spaceRef.parent;https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/storage/create-reference.js#L75-L93\n```\n\nNext, let's learn how to\n[upload files](/docs/storage/web/upload-files) to\nCloud Storage."]]