Jak przesłać pliki do pamięci Firebase za pomocą React.js

Pamięć Firebase zapewnia prosty sposób przechowywania danych generowanych przez użytkowników, takich jak obrazy, filmy i pliki audio. Integruje się z uwierzytelnianiem Firebase, dzięki czemu możesz kontrolować, kto ma dostęp do plików.

Za pomocą Firebase możesz przechowywać duże ilości treści, ponieważ jest ona automatycznie skalowana do Twoich potrzeb. Jest prosty w użyciu z zewnętrznym frameworkiem, takim jak biblioteka React JavaScript

Konfiguracja projektu

Aby przesłać pliki do Pamięć Firebase, musisz utworzyć formularz internetowy, który pozwoli użytkownikom wybrać plik z systemu plików.

Zacząć od tworzenie aplikacji React za pomocą aplikacji create-react. Uruchom to polecenie, aby wygenerować projekt React o nazwie przesyłanie-firebase:

npx Stwórz-react-app firebase-upload

Aby było to proste, potrzebujesz tylko przycisku wprowadzania, który akceptuje pliki i przycisku przesyłania. Zastąp zawartość App.js z następującym kodem.

import {stan użycia} od "reagować"
funkcjonowaćAplikacja() {
 const [plik, setFile] = useState("");





instagram viewer

// Obsługuje dane wejściowe zmianawydarzenieoraz stan aktualizacji
funkcjonowaćuchwytZmień(wydarzenie) {
setFile(wydarzenie.cel.akta[0]);
 }
zwrócić (
<div>
<typ wejścia="plik" akceptuj="obraz/*" onChange={handleChange}/>
<przycisk>Prześlij do Firebase</button>
</div>
 );
}
eksportdomyślna Aplikacja;

W powyższym kodzie, Wejście tagi zaakceptować atrybut jest ustawiony na zezwalanie tylko na obrazy. ten handleChange() funkcja obsługuje zmianę danych wejściowych i aktualizuje stan w celu przechowywania wybranego pliku.

Skonfiguruj Firebase

Przed przesłaniem pliku do pamięci Firebase musisz utworzyć projekt Firebase.

Utwórz projekt Firebase

Postępuj zgodnie z poniższymi instrukcjami, aby utworzyć projekt Firebase:

1. Przejdź do Firebase stronę konsoli i kliknij Dodaj projekt lub Utwórz projekt (jeśli tworzysz projekt po raz pierwszy).
2. Nadaj swojemu projektowi wybraną nazwę i kliknij Kontyntynuj.
3. Usuń zaznaczenie Google Analytics, ponieważ nie jest ono potrzebne w tym projekcie, i kliknij Utwórz projekt.
4. Kliknij Kontyntynuj gdy projekt jest gotowy.
5. Kliknij na ikona sieci na stronie przeglądu projektu, aby zarejestrować aplikację internetową.
6. Nadaj swojej aplikacji pseudonim i kliknij Zarejestrować.
7. Skopiuj dostarczony obiekt konfiguracyjny. Będzie on potrzebny do połączenia aplikacji z Firebase.

Utwórz zasobnik Cloud Storage

Firebase przechowuje pliki w zasobniku pamięci w chmurze. Wykonaj następujące kroki, aby go utworzyć:

1. Na stronie przeglądu projektu kliknij Składowanie zakładka w lewym panelu nawigacyjnym.
2. Kliknij Zaczynaj i wybierz Tryb testowy.
3. Wybierz domyślną lokalizację zasobnika pamięci i kliknij Zrobione.

Możesz teraz rozpocząć przesyłanie plików do pamięci Firebase.

Dodaj Firebase do React

W swoim terminalu przejdź do folderu projektu React. Uruchom następujące polecenie, aby zainstalować pakiet Firebase SDK:

npm zainstalować baza ogniowa

Utwórz nowy plik, firebaseConfig.jsi zainicjuj Firebase.

import { zainicjuj aplikację } od „firebase/aplikacja”;
import { pobierzStorage } od „firebase/magazyn”;
// Zainicjuj Firebase
stały aplikacja = zainicjujaplikację ({
 Klucz API: <Klucz API>,
 authDomain: <authDomain>,
 identyfikator projektu: <identyfikator projektu>,
 Wiaderko do przechowywania: <Wiadro do przechowywania>,
 MessageSenderId: <MessageSenderId>,
 identyfikator aplikacji: <identyfikatoraplikacji>,
 identyfikator pomiaru: <identyfikator pomiaru>,
});
// Dokumentacja pamięci Firebase
stały przechowywanie = getStorage (aplikacja);
eksportdomyślna składowanie;

Użyj obiektu konfiguracji otrzymanego po utworzeniu projektu Firebase, aby zainicjować aplikację Firebase.

Ostatni wiersz eksportuje odniesienie do pamięci Firebase, dzięki czemu możesz uzyskać dostęp do tego wystąpienia z reszty aplikacji.

Utwórz funkcję obsługi, aby przesłać obrazy do Firebase

Kliknięcie przycisku przesyłania powinno uruchomić funkcję odpowiedzialną za przesłanie pliku do pamięci Firebase. Stwórzmy tę funkcję.

W App.js, dodaj funkcję uchwytPrześlij. W funkcji sprawdź, czy plik nie jest pusty, ponieważ użytkownik może kliknąć przycisk przesyłania przed wybraniem pliku. Jeśli plik nie istnieje, zgłoś alert, który każe użytkownikowi najpierw przesłać plik.

funkcjonowaćuchwytPrześlij() {
 jeśli (!plik) {
 alarm("Proszę najpierw wybrać plik!")
 }
}

Jeśli plik istnieje, utwórz odwołanie do przechowywania. Odwołanie do pamięci działa jako wskaźnik do pliku w chmurze, na którym chcesz operować.

Zacznij od zaimportowania usługi przechowywania utworzonej w firebaseConfig.js plik.

import składowanie od „./firebaseConfig.js”

Import ref z instancji magazynu Firebase i jako argument przekaż usługę magazynu i ścieżkę pliku.

import {ref} od „baza ogniowa/pamięć”
funkcjonowaćuchwytPrześlij() {
 jeśli (!plik) {
 alarm("Proszę najpierw wybrać plik!")
 }
stały storageRef = ref (przechowywanie, `/pliki/${nazwa.pliku}`)
}

Następnie utwórz zadanie przesyłania, przekazując instancję pamięci Firebase do uploadBytesResumable() funkcjonować. Istnieje kilka metod, z których możesz skorzystać, ale ta konkretna umożliwia wstrzymanie i wznowienie przesyłania. Udostępnia również aktualizacje postępu.

ten uploadBytesResumable() funkcja akceptuje referencję do przechowywania i plik do przesłania.

import {
 ref,
 uploadBytesResumable 
} od „firebase/magazyn”;
funkcjonowaćuchwytPrześlij() {
jeśli (!plik) {
 alert("Najpierw wybierz plik!")
 }
stały storageRef = ref (przechowywanie, `/pliki/${nazwa.pliku}`)
stały uploadTask = uploadBytesResumable (storageRef, plik);
}

Aby monitorować postęp i obsługiwać błędy podczas przesyłania plików, nasłuchuj zmian stanu, błędów i zakończenia.

import {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} od "Firebase/magazyn";
funkcjonowaćuchwytPrześlij() {
 jeśli (!plik) {
 alarm("Proszę najpierw wybrać plik!")
 }
stały storageRef = ref (przechowywanie,`/pliki/${nazwa.pliku}`)
stały uploadTask = uploadBytesResumable (storageRef, plik);
prześlij zadanie.na(
"stan_zmieniony",
 (migawka) => {
stały procent = Matematyka.okrągły(
 (migawka.bytesTransferred / snapshot.totalBytes) * 100
 );
// postęp aktualizacji
 setPercent (procent);
 },
 (błąd) => konsola.log (błąd),
 () => {
// pobierz adres URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsola.log (adres URL);
 });
 }
 ); 
}

Tutaj stan_zmieniony zdarzenie ma trzy funkcje zwrotne. W pierwszej funkcji śledzisz postęp przesyłania i przesyłanie stanu postępu. W drugiej funkcji zwrotnej obsłuż błąd, jeśli przesyłanie nie powiedzie się.

Ostatnia funkcja uruchamia się po zakończeniu przesyłania i pobiera adres URL pobierania, a następnie wyświetla go w konsoli. W rzeczywistej aplikacji możesz zapisać go w bazie danych.

Możesz wyświetlić stan postępu przesyłania, używając stanu procentowego. Dodaj również na kliknięcie zdarzenie na przycisku przesyłania, aby wywołać uchwytPrześlij funkcjonować.

import { stan użycia } od "reagować";
funkcjonowaćAplikacja() {
stały [procent, setPercent] = useState(0);
zwrócić (
<div>
<typ wejścia="plik" onChange={handleChange} zaakceptować="" />
<button onClick={handleUpload}>Prześlij do Firebase</button>
<p>{procent} "% zrobione"</p>
</div>
 )
}

Oto kompletny kod dla App.js:

import { stan użycia } od "reagować";
import { składowanie } od "./firebaseConfig";
import { ref, uploadBytesResumable, getDownloadURL } od „firebase/magazyn”;
funkcjonowaćAplikacja() {
// Stan do przechowywania przesłanego pliku
 const [plik, setFile] = useState("");
// postęp
stały [procent, setPercent] = useState(0);
// Obsługa zdarzenia przesyłania pliku i stanu aktualizacji
funkcjonowaćuchwytZmień(wydarzenie) {
setFile(wydarzenie.cel.akta[0]);
 }
stały handleUpload = () => {
 jeśli (!plik) {
 alarm("Najpierw prześlij obraz!");
 }
stały storageRef = ref (przechowywanie, `/pliki/${nazwa.pliku}`);
// postęp można wstrzymywać i wznawiać. Udostępnia również aktualizacje postępu.
// Odbiera odwołanie do pamięci i plik do przesłania.
stały uploadTask = uploadBytesResumable (storageRef, plik);
prześlij zadanie.na(
"stan_zmieniony",
 (migawka) => {
stały procent = Matematyka.okrągły(
 (migawka.bytesTransferred / snapshot.totalBytes) * 100
 );
// postęp aktualizacji
 setPercent (procent);
 },
 (błąd) => konsola.log (błąd),
 () => {
// pobierz adres URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsola.log (adres URL);
 });
 }
 );
 };
zwrócić (
<div>
<typ wejścia="plik" onChange={handleChange} zaakceptować="/image/*" />
<button onClick={handleUpload}>Prześlij do Firebase</button>
<p>{procent} "% zrobione"</p>
</div>
 );
}
eksportdomyślna Aplikacja;

Więcej możliwości dzięki pamięci Firebase

Przesyłanie plików to jedna z najbardziej podstawowych funkcji pamięci Firebase. Pamięć Firebase pozwala jednak na inne rzeczy. Możesz uzyskać dostęp, wyświetlać, organizować i usuwać swoje pliki.

W bardziej skomplikowanej aplikacji możesz chcieć uwierzytelnić użytkowników, aby nadać im uprawnienia do interakcji tylko z ich plikami.

Uwierzytelnianie użytkowników za pomocą Firebase i React

Czytaj dalej

O autorze