Kako naložiti datoteke v pomnilnik Firebase z uporabo React.js

Pomnilnik Firebase ponuja preprost način za shranjevanje podatkov, ki jih ustvarijo uporabniki, kot so slike, videoposnetki in zvočne datoteke. Integrira se s preverjanjem pristnosti Firebase, tako da lahko nadzorujete, kdo ima dostop do datotek.

S Firebase lahko shranite velike količine vsebine, saj se samodejno prilagaja vašim potrebam. Preprosta je za uporabo z ogrodjem tretjih oseb, kot je knjižnica React JavaScript

Nastavitev projekta

Za nalaganje datotek v Shramba Firebase, morate ustvariti spletni obrazec, ki uporabnikom omogoča izbiro datoteke iz datotečnega sistema.

Začnite z ustvarjanje aplikacije React z uporabo aplikacije create-react-app. Zaženite ta ukaz, da ustvarite imenovan projekt React firebase-upload:

npx ustvariti-react-app firebase-upload

Da bo to preprosto, potrebujete samo gumb za vnos, ki sprejema datoteke, in gumb za nalaganje. Zamenjajte vsebino App.js z naslednjo kodo.

uvoz {useState} od "reagirati"
funkcijoApp() {
 const [datoteka, setFile] = useState("");
// Upravlja z vnosom 





instagram viewer
spremenitidogodekin stanje posodobitev
funkcijohandleChange(dogodek) {
setFile(dogodek.cilj.datoteke[0]);
 }

vrnitev (
<razdel>
<vrsta vnosa="mapa" sprejme ="slika/*" onChange={handleChange}/>
<gumb>Naložite v Firebase</button>
</div>
 );
}
izvozprivzeto aplikacija;

V zgornji kodi je vnos oznake sprejeti atribut je nastavljen tako, da dovoljuje samo slike. The handleChange() funkcija obravnava spremembo vnosa in posodobi stanje za shranjevanje izbrane datoteke.

Nastavite Firebase

Preden datoteko naložite v shrambo Firebase, morate ustvariti projekt Firebase.

Ustvarite projekt Firebase

Sledite spodnjim navodilom, da ustvarite projekt Firebase:

1. Pojdite na Firebase strani konzole in kliknite na Dodaj projekt oz Ustvarite projekt (če prvič ustvarjate projekt).
2. Dajte svojemu projektu ime po vaši izbiri in kliknite Nadaljuj.
3. Počistite izbor storitve Google Analytics, ker je ne potrebujete za ta projekt, in kliknite Ustvari projekt.
4. Kliknite Nadaljuj ko je projekt pripravljen.
5. Kliknite na spletna ikona na strani s pregledom projekta, da registrirate spletno aplikacijo.
6. Dajte aplikaciji vzdevek in kliknite Registriraj se.
7. Kopirajte priloženi konfiguracijski objekt. Potrebovali ga boste za povezavo vaše aplikacije s Firebase.

Ustvarite vedro za shranjevanje v oblaku

Firebase shranjuje datoteke v vedro za shranjevanje v oblaku. Sledite tem korakom, da ga ustvarite:

1. Na strani s pregledom projekta kliknite na Skladiščenje zavihek na levi navigacijski plošči.
2. Kliknite Začeti in izberite Testni način.
3. Izberite privzeto lokacijo vedra za shranjevanje in kliknite Končano.

Zdaj ste pripravljeni začeti nalagati datoteke v shrambo Firebase.

Dodajte Firebase v React

V terminalu se pomaknite do mape projekta React. Za namestitev Firebase SDK zaženite naslednji ukaz:

npm namestite požarna baza

Ustvarite novo datoteko, firebaseConfig.js, in inicializirajte Firebase.

uvoz { initializeApp } od "firebase/app";
uvoz { getStorage } od "firebase/storage";
// Inicializiraj Firebase
konst app = inicializirajApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 ID projekta: <ID projekta>,
 vedro za shranjevanje: <vedro za shranjevanje>,
 MessagingSenderId: <MessagingSenderId>,
 appId: <appId>,
 Id meritve: <meritevId>,
});
// Referenca za shranjevanje Firebase
konst shranjevanje = getStorage (aplikacija);
izvozprivzeto skladiščenje;

Uporabite konfiguracijski predmet, ki ste ga dobili po ustvarjanju projekta Firebase, da inicializirate aplikacijo Firebase.

Zadnja vrstica izvozi referenco za shranjevanje Firebase, tako da lahko dostopate do tega primerka iz preostalega dela aplikacije.

Ustvarite funkcijo upravljalnika za nalaganje slik v Firebase

S klikom na gumb za nalaganje bi se morala sprožiti funkcija, ki je odgovorna za nalaganje datoteke v pomnilnik Firebase. Ustvarimo to funkcijo.

V App.js, dodajte funkcijo handleUpload. V funkciji preverite, ali datoteka ni prazna, saj lahko uporabnik klikne gumb za nalaganje, preden izbere datoteko. Če datoteka ne obstaja, sprožite opozorilo, ki uporabniku pove, naj najprej naloži datoteko.

funkcijohandleUpload() {
 če (!datoteka) {
 opozorilo ("Najprej izberite datoteko!")
 }
}

Če datoteka obstaja, ustvarite referenco za shranjevanje. Referenca za shranjevanje deluje kot kazalec na datoteko v oblaku, s katero želite upravljati.

Začnite z uvozom storitve za shranjevanje, ki ste jo ustvarili v firebaseConfig.js mapa.

uvoz skladiščenje od "./firebaseConfig.js"

Uvozi ref iz primerka pomnilnika Firebase in posredujte storitev za shranjevanje in pot datoteke kot argument.

uvoz {ref} od "firebase/storage"
funkcijohandleUpload() {
 če (!datoteka) {
 opozorilo ("Najprej izberite datoteko!")
 }
konst shranjevanjeRef = ref (shramba, `/datoteke/${file.name}`)
}

Nato ustvarite nalogo za nalaganje tako, da posredujete primerek pomnilnika Firebase v uploadBytesResumable() funkcijo. Obstaja več načinov, ki jih lahko uporabite, vendar vam ta omogoča premor in nadaljevanje nalaganja. Razkriva tudi posodobitve napredka.

The uploadBytesResumable() funkcija sprejme referenco za shranjevanje in datoteko za nalaganje.

uvoz {
 ref,
 uploadBytesResumable 
} od "firebase/storage";
funkcijohandleUpload() {
če (!mapa) {
 alert("Prosim, najprej izberite datoteko!")
 }
konst shranjevanjeRef = ref (shramba, `/datoteke/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, datoteka);
}

Če želite spremljati napredek in obravnavati napake med nalaganjem datoteke, poslušajte spremembe stanja, napake in dokončanje.

uvoz {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} od "firebase/shramba";
funkcijohandleUpload() {
 če (!datoteka) {
 opozorilo ("Najprej izberite datoteko!")
 }
konst shranjevanjeRef = ref (shramba,`/datoteke/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, datoteka);
uploadTask.vklop(
"stanje_spremenjeno",
 (posnetek) => {
konst odstotek = matematika.okrogla (
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// napredek posodobitve
 setPercent (odstotek);
 },
 (napaka) => konzolo.log (napaka),
 () => {
// URL za prenos
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konzolo.log (url);
 });
 }
 ); 
}

Tukaj, stanje_spremenjeno dogodek ima tri funkcije povratnega klica. V prvi funkciji spremljate napredek nalaganja in nalagate stanje napredka. V drugi funkciji povratnega klica obdelajte napako, če nalaganje ni uspelo.

Končna funkcija se zažene, ko je nalaganje končano, in dobi URL za prenos, nato pa ga prikaže na konzoli. V resnični aplikaciji jo lahko shranite v bazo podatkov.

Stanje napredka nalaganja lahko prikažete s pomočjo odstotka. Dodajte tudi onClick dogodek na gumbu za nalaganje, da se sproži handleUpload funkcijo.

uvoz {useState} od "reagirati";
funkcijoApp() {
konst [odstotek, setPercent] = useState(0);
vrnitev (
<razdel>
<vrsta vnosa="mapa" onChange={handleChange} sprejem="" />
<gumb onClick={handleUpload}>Naložite v Firebase</button>
<str>{percent} "% Končano"</str>
</div>
 )
}

Tukaj je celotna koda za App.js:

uvoz {useState} od "reagirati";
uvoz {shramba} od "./firebaseConfig";
uvoz { ref, uploadBytesResumable, getDownloadURL } od "firebase/storage";
funkcijoApp() {
// Stanje za shranjevanje naložene datoteke
 const [datoteka, setFile] = useState("");
// napredek
konst [odstotek, setPercent] = useState(0);
// Obravnava dogodek nalaganja datoteke in stanje posodobitve
funkcijohandleChange(dogodek) {
setFile(dogodek.cilj.datoteke[0]);
 }
konst handleUpload = () => {
 če (!datoteka) {
 opozorilo ("Najprej naložite sliko!");
 }
konst shranjevanjeRef = ref (shramba, `/datoteke/${file.name}`);
// napredek je mogoče začasno ustaviti in nadaljevati. Razkriva tudi posodobitve napredka.
// Prejema referenco za shranjevanje in datoteko za nalaganje.
konst uploadTask = uploadBytesResumable (storageRef, datoteka);
uploadTask.vklop(
"stanje_spremenjeno",
 (posnetek) => {
konst odstotek = matematika.okrogla (
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// napredek posodobitve
 setPercent (odstotek);
 },
 (napaka) => konzolo.log (napaka),
 () => {
// URL za prenos
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konzolo.log (url);
 });
 }
 );
 };
vrnitev (
<razdel>
<vrsta vnosa="mapa" onChange={handleChange} sprejem="/image/*" />
<gumb onClick={handleUpload}>Naložite v Firebase</button>
<str>{percent} "% Končano"</str>
</div>
 );
}
izvozprivzeto aplikacija;

Naredite več s storitvijo Firebase Storage

Nalaganje datotek je ena najosnovnejših funkcij pomnilnika Firebase. Vendar pa obstajajo še druge stvari, ki vam jih omogoča shranjevanje Firebase. Do svojih datotek lahko dostopate, jih prikažete, organizirate in izbrišete.

V bolj zapleteni aplikaciji boste morda želeli overiti uporabnike, da jim daste dovoljenje za interakcijo samo z njihovimi datotekami.

Preverjanje pristnosti uporabnikov s Firebase & React

Preberite Naprej

O avtorju