สร้างข้อมูลอ้างอิงของ Cloud Storage บนเว็บ

ระบบจะจัดเก็บไฟล์ของคุณในที่เก็บข้อมูล Cloud Storage ไฟล์ในที่เก็บข้อมูลนี้จะแสดงผลเป็นโครงสร้างลำดับชั้น เช่นเดียวกับระบบไฟล์ในฮาร์ดดิสก์ในเครื่องหรือข้อมูลในฐานข้อมูลเรียลไทม์ของ Firebase การสร้างการอ้างอิงไปยังไฟล์จะทำให้แอปของคุณมีสิทธิ์เข้าถึงไฟล์นั้น จากนั้น ระบบสามารถใช้การอ้างอิงเหล่านี้เพื่ออัปโหลดหรือดาวน์โหลดข้อมูล รับหรืออัปเดตข้อมูลเมตา หรือลบไฟล์ ข้อมูลอ้างอิงอาจชี้ไปยังไฟล์ที่เฉพาะเจาะจงหรือโหนดในลำดับชั้นที่สูงกว่าก็ได้

หากใช้ฐานข้อมูลเรียลไทม์ของ Firebase เส้นทางเหล่านี้น่าจะคุ้นเคยมาก แต่ข้อมูลไฟล์จะจัดเก็บอยู่ใน Cloud Storage ไม่ใช่ใน Realtime Database

สร้างการอ้างอิง

คุณต้องสร้างการอ้างอิงไปยังไฟล์ที่ต้องการดำเนินการเพื่ออัปโหลดหรือดาวน์โหลดไฟล์ ลบไฟล์ หรืออัปเดตข้อมูลเมตา การอ้างอิงอาจหมายถึงตัวชี้ไปยังไฟล์ในระบบคลาวด์ ข้อมูลอ้างอิงมีขนาดเล็ก คุณจึงสร้างได้เท่าที่ต้องการ และยังใช้ซ้ำสำหรับการดำเนินการหลายๆ อย่างได้ด้วย

หากต้องการสร้างข้อมูลอ้างอิง ให้รับอินสแตนซ์ของบริการพื้นที่เก็บข้อมูลโดยใช้ getStorage() แล้วเรียกใช้ ref() พร้อมด้วยบริการเป็นอาร์กิวเมนต์ การอ้างอิงนี้จะชี้ไปยังรูทของที่เก็บข้อมูล Cloud Storage

Web Modular API

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

API ที่ใช้เนมสเปซในเว็บ

// 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

คุณสร้างการอ้างอิงไปยังตำแหน่งที่ต่ำกว่าในโครงสร้างได้ เช่น 'images/space.jpg' โดยส่งผ่านเส้นทางนี้เป็นอาร์กิวเมนต์ที่ 2 เมื่อเรียกใช้ ref()

Web Modular API

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

API ที่ใช้เนมสเปซในเว็บ

// 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 เลื่อนขึ้น 1 ระดับ ส่วน root เลื่อนขึ้นไปจนถึงด้านบนสุด

Web Modular API

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

API ที่ใช้เนมสเปซในเว็บ

// 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 เข้าด้วยกันได้หลายครั้ง เนื่องจากแต่ละรายการจะแสดงการอ้างอิง ข้อยกเว้นคือ parent ของ root ซึ่งเท่ากับ null

Web Modular API

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

API ที่ใช้เนมสเปซในเว็บ

// 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 พร็อพเพอร์ตี้เหล่านี้จะรับเส้นทางแบบเต็มของไฟล์ ชื่อไฟล์ และที่เก็บข้อมูลที่จัดเก็บไฟล์ไว้

Web Modular API

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

API ที่ใช้เนมสเปซในเว็บ

// 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. ความยาวรวมของ reference.fullPath ต้องอยู่ระหว่าง 1 ถึง 1024 ไบต์เมื่อเข้ารหัส UTF-8
  2. ไม่มีอักขระแบบขึ้นบรรทัดใหม่หรือแบบฟีดบรรทัด
  3. หลีกเลี่ยงการใช้ #, [, ], * หรือ ? เนื่องจากใช้ไม่ได้กับเครื่องมืออื่นๆ เช่น ฐานข้อมูลเรียลไทม์ของ Firebase หรือ gsutil

ตัวอย่างแบบเต็ม

Web Modular API

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

API ที่ใช้เนมสเปซในเว็บ

// 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