Cloud Storage สำหรับ Firebase ช่วยให้คุณดาวน์โหลดไฟล์จากที่เก็บ ข้อมูล Cloud Storage ที่ Firebase จัดเตรียมและจัดการโดย Firebase ได้อย่างรวดเร็วและง่ายดาย
สร้างข้อมูลอ้างอิง
หากต้องการดาวน์โหลดไฟล์ ขั้นแรก ให้สร้างการอ้างอิง Cloud Storage ไปยังไฟล์ที่คุณต้องการดาวน์โหลด
คุณสามารถสร้างข้อมูลอ้างอิงได้โดยเพิ่มเส้นทางลูกต่อท้ายรากของที่เก็บข้อมูล Cloud Storage ของคุณ หรือคุณสามารถสร้างข้อมูลอ้างอิงจาก gs://
หรือ https://
URL ที่มีอยู่ซึ่งอ้างอิงออบเจ็กต์ใน Cloud Storage ก็ได้
Web modular API
import { getStorage, ref } from "firebase/storage"; // Create a reference with an initial file path and name const storage = getStorage(); const pathReference = ref(storage, 'images/stars.jpg'); // Create a reference from a Google Cloud Storage URI const gsReference = ref(storage, 'gs://bucket/images/stars.jpg'); // Create a reference from an HTTPS URL // Note that in the URL, characters are URL escaped! const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');
Web namespaced API
// Create a reference with an initial file path and name var storage = firebase.storage(); var pathReference = storage.ref('images/stars.jpg'); // Create a reference from a Google Cloud Storage URI var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg'); // Create a reference from an HTTPS URL // Note that in the URL, characters are URL escaped! var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');
ดาวน์โหลดข้อมูลผ่าน URL
คุณสามารถรับ URL การดาวน์โหลดไฟล์ได้โดยการเรียกเมธอด getDownloadURL()
ในการอ้างอิง Cloud Storage
Web modular API
import { getStorage, ref, getDownloadURL } from "firebase/storage"; const storage = getStorage(); getDownloadURL(ref(storage, 'images/stars.jpg')) .then((url) => { // `url` is the download URL for 'images/stars.jpg' // This can be downloaded directly: const xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = (event) => { const blob = xhr.response; }; xhr.open('GET', url); xhr.send(); // Or inserted into an <img> element const img = document.getElementById('myimg'); img.setAttribute('src', url); }) .catch((error) => { // Handle any errors });
Web namespaced API
storageRef.child('images/stars.jpg').getDownloadURL() .then((url) => { // `url` is the download URL for 'images/stars.jpg' // This can be downloaded directly: var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = (event) => { var blob = xhr.response; }; xhr.open('GET', url); xhr.send(); // Or inserted into an <img> element var img = document.getElementById('myimg'); img.setAttribute('src', url); }) .catch((error) => { // Handle any errors });
ดาวน์โหลดข้อมูลโดยตรงจาก SDK
ตั้งแต่เวอร์ชัน 9.5 ขึ้นไป SDK มีฟังก์ชันเหล่านี้สำหรับการดาวน์โหลดโดยตรง:
เมื่อใช้ฟังก์ชันเหล่านี้ คุณสามารถข้ามการดาวน์โหลดจาก URL และส่งคืนข้อมูลในโค้ดของคุณแทนได้ ซึ่งช่วยให้สามารถควบคุมการเข้าถึงได้ละเอียดยิ่งขึ้นผ่าน กฎความปลอดภัยของ Firebase
การกำหนดค่า CORS
หากต้องการดาวน์โหลดข้อมูลโดยตรงในเบราว์เซอร์ คุณต้องกำหนดค่าที่เก็บข้อมูล Cloud Storage สำหรับการเข้าถึงข้ามต้นทาง (CORS) ซึ่งสามารถทำได้ด้วยเครื่องมือบรรทัดคำสั่ง gsutil
ซึ่งคุณสามารถ ติดตั้งได้จากที่นี่
หากคุณไม่ต้องการข้อจำกัดตามโดเมน (สถานการณ์ที่พบบ่อยที่สุด) ให้คัดลอก JSON นี้ไปยังไฟล์ชื่อ cors.json
:
[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ]
เรียกใช้ gsutil cors set cors.json gs://<your-cloud-storage-bucket>
เพื่อทำให้ข้อจำกัดเหล่านี้ใช้งานได้
สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารประกอบของ Google Cloud Storage
จัดการกับข้อผิดพลาด
มีสาเหตุหลายประการที่ทำให้เกิดข้อผิดพลาดในการดาวน์โหลด รวมถึงไฟล์ที่ไม่มีอยู่ หรือผู้ใช้ไม่ได้รับอนุญาตให้เข้าถึงไฟล์ที่ต้องการ ข้อมูลเพิ่มเติมเกี่ยวกับข้อผิดพลาดสามารถพบได้ในส่วน การจัดการข้อผิดพลาด ของเอกสาร
ตัวอย่างแบบเต็ม
ตัวอย่างการดาวน์โหลดแบบเต็มพร้อมการจัดการข้อผิดพลาดแสดงอยู่ด้านล่าง:
Web modular API
import { getStorage, ref, getDownloadURL } from "firebase/storage"; // Create a reference to the file we want to download const storage = getStorage(); const starsRef = ref(storage, 'images/stars.jpg'); // Get the download URL getDownloadURL(starsRef) .then((url) => { // Insert url into an <img> tag to "download" }) .catch((error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors switch (error.code) { case 'storage/object-not-found': // File doesn't exist break; case 'storage/unauthorized': // User doesn't have permission to access the object break; case 'storage/canceled': // User canceled the upload break; // ... case 'storage/unknown': // Unknown error occurred, inspect the server response break; } });
Web namespaced API
// Create a reference to the file we want to download var starsRef = storageRef.child('images/stars.jpg'); // Get the download URL starsRef.getDownloadURL() .then((url) => { // Insert url into an <img> tag to "download" }) .catch((error) => { // A full list of error codes is available at // https://firebase.google.com/docs/storage/web/handle-errors switch (error.code) { case 'storage/object-not-found': // File doesn't exist break; case 'storage/unauthorized': // User doesn't have permission to access the object break; case 'storage/canceled': // User canceled the upload break; // ... case 'storage/unknown': // Unknown error occurred, inspect the server response break; } });
คุณยัง รับหรืออัปเดตข้อมูลเมตา สำหรับไฟล์ที่จัดเก็บไว้ใน Cloud Storage ได้ด้วย