在 Web 上建立 Cloud Storage 參考

您的檔案儲存在Cloud Storage 儲存分割區中。此儲存桶中的檔案以分層結構呈現，就像本機硬碟上的檔案系統或 Firebase 即時資料庫中的資料一樣。透過建立對文件的引用，您的應用程式可以存取它。然後，這些引用可用於上傳或下載資料、取得或更新元資料或刪除檔案。引用可以指向特定檔案或層次結構中的更高層級節點。

如果您使用過Firebase 即時資料庫，那麼您應該對這些路徑非常熟悉。但是，您的檔案資料儲存在 Cloud Storage 中，而不是儲存在即時資料庫中。

建立參考

為了上傳或下載檔案、刪除檔案或取得或更新元數據，您必須建立要操作的檔案的參考。可以將引用視為指向雲端中檔案的指標。引用是輕量級的，因此您可以根據需要建立任意數量的引用，並且它們還可以重複用於多個操作。

若要建立引用，請使用getStorage()取得儲存服務的實例，然後將該服務作為參數呼叫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 即時資料庫或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

接下來，我們來學習如何將文件上傳到雲端儲存。