Kā augšupielādēt failus Firebase krātuvē, izmantojot React.js

Firebase krātuve nodrošina vienkāršu veidu, kā saglabāt lietotāja ģenerētus datus, piemēram, attēlus, videoklipus un audio failus. Tas ir integrēts ar Firebase autentifikāciju, lai jūs varētu kontrolēt, kam ir piekļuve failiem.

Izmantojot Firebase, varat uzglabāt lielu daudzumu satura, jo tas automātiski tiek mērogots atbilstoši jūsu vajadzībām. To ir vienkārši izmantot ar trešās puses sistēmu, piemēram, React JavaScript bibliotēku

Projekta iestatīšana

Lai augšupielādētu failus uz Firebase krātuve, jums ir jāizveido tīmekļa veidlapa, kas lietotājiem ļauj atlasīt failu no failu sistēmas.

Sāciet ar izveidojot React lietotni izmantojot lietotni izveidot-reaģēt. Palaidiet šo komandu, lai ģenerētu React projektu, ko sauc Firebase-augšupielāde:

npx izveidot-react-app firebase-upload

Lai tas būtu vienkārši, jums ir nepieciešama tikai ievades poga, kas pieņem failus, un augšupielādes poga. Nomainiet saturu App.js ar šādu kodu.

imports {useState} no "reaģēt"
funkcijaApp() {
 const [fails, setFile] = useState("");

instagram viewer

// Apstrādā ievadi mainītnotikumuun atjauninājumu stāvoklis
funkcijarokturisMainīt(notikumu) {
setFile(notikumu.target.faili[0]);
 }
atgriezties (
<div>
<ievades veids="failu" pieņemt ="attēls/*" onChange={handleChange}/>
<pogu>Augšupielādējiet pakalpojumā Firebase</button>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Iepriekš minētajā kodā ievade tagus pieņemt atribūts ir iestatīts tā, lai atļautu tikai attēlus. The handChange() funkcija apstrādā ievades izmaiņas un atjaunina stāvokli, lai saglabātu atlasīto failu.

Firebase iestatīšana

Pirms faila augšupielādes Firebase krātuvē ir jāizveido Firebase projekts.

Izveidojiet Firebase projektu

Izpildiet tālāk sniegtos norādījumus, lai izveidotu Firebase projektu.

1. Dodieties uz Firebase konsoles lapu un noklikšķiniet uz Pievienot projektu vai Izveidojiet projektu (ja projektu veidojat pirmo reizi).
2. Piešķiriet savam projektam nosaukumu pēc savas izvēles un noklikšķiniet uz Turpināt.
3. Noņemiet atzīmi no Google Analytics, jo jums tas nav nepieciešams šim projektam, un noklikšķiniet uz Izveidot projektu.
4. Klikšķis Turpināt kad projekts ir gatavs.
5. Noklikšķiniet uz tīmekļa ikona projekta pārskata lapā, lai reģistrētu tīmekļa lietotni.
6. Piešķiriet savai lietotnei segvārdu un noklikšķiniet Reģistrēties.
7. Kopējiet norādīto konfigurācijas objektu. Tas būs nepieciešams, lai savienotu lietojumprogrammu ar Firebase.

Izveidojiet mākoņa krātuves kopu

Firebase glabā failus mākoņa krātuves segmentā. Lai to izveidotu, veiciet tālāk norādītās darbības.

1. Projekta pārskata lapā noklikšķiniet uz Uzglabāšana cilne kreisajā navigācijas panelī.
2. Klikšķis Sāc un atlasiet testa režīms.
3. Atlasiet noklusējuma krātuves kausa atrašanās vietu un noklikšķiniet uz Gatavs.

Tagad esat gatavs sākt failu augšupielādi Firebase krātuvē.

Pievienojiet Firebase, lai reaģētu

Savā terminālī dodieties uz savu React projekta mapi. Lai instalētu Firebase SDK, izpildiet šo komandu:

npm uzstādīt Firebase

Izveidojiet jaunu failu, firebaseConfig.jsun inicializējiet Firebase.

imports {inicializeApp} no "firebase/app";
imports { getStorage } no "firebase/storage";
// Inicializēt Firebase
konst app = inicializētApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projekta ID: <projekta ID>,
 uzglabāšanas kauss: <glabāšanas kauss>,
 messagingSenderId: <ziņojumapmaiņas SenderId>,
 appId: <appId>,
 mērījuma ID: <mērījuma ID>,
});
// Firebase krātuves atsauce
konst krātuve = getStorage (lietotne);
eksportētnoklusējuma uzglabāšana;

Izmantojiet konfigurācijas objektu, ko ieguvāt pēc Firebase projekta izveides, lai inicializētu Firebase lietotni.

Pēdējā rindā tiek eksportēta Firebase krātuves atsauce, lai jūs varētu piekļūt šai instancei no pārējās lietotnes.

Izveidojiet apdarinātāja funkciju, lai augšupielādētu attēlus Firebase

Noklikšķinot uz augšupielādes pogas, ir jāaktivizē funkcija, kas ir atbildīga par faila augšupielādi Firebase krātuvē. Izveidosim šo funkciju.

In App.js, pievienojiet funkciju rokturisAugšupielādēt. Funkcijā pārbaudiet, vai fails nav tukšs, jo lietotājs pirms faila izvēles var noklikšķināt uz augšupielādes pogas. Ja fails neeksistē, aktivizējiet brīdinājumu, kas liek lietotājam vispirms augšupielādēt failu.

funkcijarokturisAugšupielādēt() {
 if (!fails) {
 brīdināt ("Lūdzu, vispirms izvēlieties failu!")
 }
}

Ja fails pastāv, izveidojiet krātuves atsauci. Krātuves atsauce darbojas kā rādītājs uz failu mākonī, ar kuru vēlaties strādāt.

Sāciet, importējot krātuves pakalpojumu, ko izveidojāt firebaseConfig.js failu.

imports uzglabāšana no "./firebaseConfig.js"

Importēt ref no Firebase krātuves instances un kā argumentu norādiet krātuves pakalpojumu un faila ceļu.

imports {ref} no "firebase/storage"
funkcijarokturisAugšupielādēt() {
 if (!fails) {
 brīdināt ("Lūdzu, vispirms izvēlieties failu!")
 }
konst storageRef = ref (krātuve, `/faili/${file.name}`)
}

Pēc tam izveidojiet augšupielādes uzdevumu, nosūtot Firebase krātuves gadījumu uz uploadBytesResumable() funkcija. Varat izmantot vairākas metodes, taču šī konkrētā ļauj apturēt un atsākt augšupielādi. Tas arī atklāj progresa atjauninājumus.

The uploadBytesResumable() funkcija pieņem krātuves atsauci un augšupielādējamo failu.

imports {
 ref,
 uploadBytesResumable 
} no "firebase/storage";
funkcijarokturisAugšupielādēt() {
ja (!fails) {
 brīdinājums ("Lūdzu, vispirms izvēlieties failu!")
 }
konst storageRef = ref (krātuve, `/faili/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, fails);
}

Lai pārraudzītu progresu un apstrādātu kļūdas faila augšupielādes laikā, klausieties stāvokļa izmaiņas, kļūdas un pabeigšanu.

imports {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} no "Firebase/krātuve";
funkcijarokturisAugšupielādēt() {
 if (!fails) {
 brīdināt ("Lūdzu, vispirms izvēlieties failu!")
 }
konst storageRef = ref (krātuve,`/faili/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, fails);
augšupielādes uzdevums.ieslēgts(
"stāvoklis_mainīts",
 (momentuzņēmums) => {
konst procenti = Matemātika.raunds(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// atjaunināšanas gaita
 setPercent (procenti);
 },
 (kļūda) => konsole.log (kļūda),
 () => {
// lejupielādes URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsole.log (url);
 });
 }
 ); 
}

Lūk, stāvoklis_mainīts notikumam ir trīs atzvanīšanas funkcijas. Pirmajā funkcijā jūs sekojat augšupielādes gaitai un augšupielādējat progresa stāvokli. Otrajā atzvanīšanas funkcijā apstrādājiet kļūdu, ja augšupielāde ir neveiksmīga.

Pēdējā funkcija tiek izpildīta, kad augšupielāde ir pabeigta, un iegūst lejupielādes URL, pēc tam to parāda konsolē. Reālajā dzīvē varat to saglabāt datu bāzē.

Varat parādīt augšupielādes progresa stāvokli, izmantojot procentuālo stāvokli. Pievienojiet arī an onClick notikums uz augšupielādes pogas, lai aktivizētu rokturisAugšupielādēt funkcija.

imports { useState } no "reaģēt";
funkcijaApp() {
konst [percent, setPercent] = useState(0);
atgriezties (
<div>
<ievades veids="failu" onChange={handleChange} accept="" />
<poga onClick={handleUpload}>Augšupielādējiet pakalpojumā Firebase</button>
<lpp>{percent} "% paveikts"</lpp>
</div>
 )
}

Šeit ir pilns kods App.js:

imports { useState } no "reaģēt";
imports { krātuve } no "./firebaseConfig";
imports { ref, uploadBytesResumable, getDownloadURL } no "firebase/storage";
funkcijaApp() {
// Norādiet, lai saglabātu augšupielādēto failu
 const [fails, setFile] = useState("");
// progress
konst [percent, setPercent] = useState(0);
// Apstrādājiet failu augšupielādes notikumu un atjaunināšanas stāvokli
funkcijarokturisMainīt(notikumu) {
setFile(notikumu.target.faili[0]);
 }
konst handupload = () => {
 if (!fails) {
 brīdināt ("Lūdzu, vispirms augšupielādējiet attēlu!");
 }
konst storageRef = ref (krātuve, `/faili/${file.name}`);
// progresu var apturēt un atsākt. Tas arī atklāj progresa atjauninājumus.
// Saņem krātuves atsauci un augšupielādējamo failu.
konst uploadTask = uploadBytesResumable (storageRef, fails);
augšupielādes uzdevums.ieslēgts(
"stāvoklis_mainīts",
 (momentuzņēmums) => {
konst procenti = Matemātika.raunds(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// atjaunināšanas gaita
 setPercent (procenti);
 },
 (kļūda) => konsole.log (kļūda),
 () => {
// lejupielādes URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsole.log (url);
 });
 }
 );
 };
atgriezties (
<div>
<ievades veids="failu" onChange={handleChange} accept="/image/*" />
<poga onClick={handleUpload}>Augšupielādējiet pakalpojumā Firebase</button>
<lpp>{percent} "% paveikts"</lpp>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Paveiciet vairāk, izmantojot Firebase krātuvi

Failu augšupielāde ir viena no Firebase krātuves pamatfunkcijām. Tomēr ir arī citas lietas, ko Firebase krātuve ļauj veikt. Varat piekļūt saviem failiem, tos parādīt, kārtot un dzēst.

Sarežģītākā lietotnē, iespējams, vēlēsities autentificēt lietotājus, lai dotu viņiem atļauju mijiedarboties tikai ar viņu failiem.

Lietotāju autentifikācija, izmantojot Firebase un React

Lasiet Tālāk

Par autoru