Aplikacja Cloud Storage for Firebase umożliwia szybkie i łatwe pobieranie pliki z: Cloud Storage udostępniane i zarządzane przez Firebase.
Tworzenie referencji
Aby pobrać plik, utwórz referencję Cloud Storage w pliku, który chcesz pobrać.
Możesz utworzyć odwołanie, dodając ścieżki podrzędne do katalogu głównego zasobnika Cloud Storage lub utworzyć odwołanie z dotychczasowego adresu URL gs://
lub https://
odwołującego się do obiektu w Cloud Storage.
Web
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
// 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');
Pobierz dane za pomocą adresu URL
Adres URL do pobrania pliku możesz uzyskać, wywołując metodę getDownloadURL()
w odwołaniu Cloud Storage.
Web
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
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 });
Pobieranie danych bezpośrednio z pakietu SDK
Pakiet SDK w wersji 9.5 i nowszych udostępnia te funkcje pobieranie:
Korzystając z tych funkcji, możesz pominąć pobieranie z adresu URL i zamiast tego które zwracają dane w kodzie. Umożliwia to bardziej szczegółową kontrolę dostępu za pomocą Firebase Security Rules.
Konfiguracja CORS
Aby pobierać dane bezpośrednio w przeglądarce, musisz skonfigurować
Cloud Storage zasobnik na potrzeby dostępu z innych domen (CORS). Można to zrobić
za pomocą narzędzia wiersza poleceń gsutil
,
zainstaluj ją tutaj.
Jeśli nie chcesz stosować żadnych ograniczeń na poziomie domeny (najczęstszy scenariusz),
skopiuj ten kod JSON do pliku o nazwie cors.json
:
[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ]
Uruchom gsutil cors set cors.json gs://<your-cloud-storage-bucket>
, aby wdrożyć
tych ograniczeń.
Aby dowiedzieć się więcej, zapoznaj się z dokumentacja Google Cloud Storage.
Obsługa błędów
Błędy mogą występować przy pobieraniu z kilku powodów. Oto niektóre z nich: jeśli plik nie istnieje lub użytkownik nie ma uprawnień dostępu do żądanego pliku. Więcej informacji o błędach znajdziesz w Obsługa błędów sekcji dokumentów.
Pełny przykład
Pełny przykład pliku do pobrania z obsługą błędów znajdziesz poniżej:
Web
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
// 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; } });
Możesz też pobierać lub aktualizować metadane. w przypadku plików przechowywanych w folderze Cloud Storage.