Failide üleslaadimine Firebase'i salvestusruumi React.js-i abil

Firebase'i salvestusruum pakub lihtsat viisi kasutaja loodud andmete (nt pildid, videod ja helifailid) salvestamiseks. See integreerub Firebase'i autentimisega, nii et saate kontrollida, kellel on juurdepääs failidele.

Firebase'i abil saate salvestada suures koguses sisu, kuna see skaleerub automaatselt teie vajadustele vastavaks. Seda on lihtne kasutada koos kolmanda osapoole raamistikuga, näiteks React JavaScripti teegiga

Projekti seadistamine

Failide üleslaadimiseks Firebase'i salvestusruum, peate looma veebivormi, mis võimaldab kasutajatel failisüsteemist faili valida.

Alusta sellest Reacti rakenduse loomine kasutades rakendust loo-reageeri. Käivitage see käsk, et genereerida React-projekt nimega firebase-upload:

npx luua-react-app firebase-upload

Lihtsamaks muutmiseks vajate ainult failide vastuvõtvat sisendnuppu ja üleslaadimisnuppu. Asendage sisu App.js järgmise koodiga.

importida {useState} alates "reageeri"
funktsiooniRakendus() {
 const [fail, setFile] = useState("");
// Käsitseb sisendit 





instagram viewer
muutasündmusja värskenduste olek
funktsioonikäepideMuuda(sündmus) {
setFile(sündmus.sihtmärk.failid[0]);
 }

tagasi (
<div>
<sisendi tüüp="faili" aktsepteeri ="pilt/*" onChange={handleChange}/>
<nuppu>Laadige Firebase'i üles</button>
</div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodis on sisend sildid aktsepteerima atribuut on seatud lubama ainult pilte. The HandChange() Funktsioon tegeleb sisendi muutmisega ja värskendab valitud faili salvestamiseks olekut.

Seadistage Firebase

Enne faili Firebase'i salvestusruumi üleslaadimist peate looma Firebase'i projekti.

Looge Firebase'i projekt

Firebase'i projekti loomiseks järgige allolevaid juhiseid.

1. Mine lehele Firebase konsooli leht ja klõpsake nuppu Lisa projekt või Loo projekt (kui loote projekti esimest korda).
2. Andke oma projektile enda valitud nimi ja klõpsake Jätka.
3. Tühjendage Google Analyticsi valik, kuna te ei vaja seda selle projekti jaoks ja klõpsake Loo projekt.
4. Klõpsake Jätka kui projekt on valmis.
5. Klõpsake nuppu veebiikoon projekti ülevaate lehel veebirakenduse registreerimiseks.
6. Andke oma rakendusele hüüdnimi ja klõpsake Registreeri.
7. Kopeerige pakutud konfiguratsiooniobjekt. Vajate seda rakenduse Firebase'iga ühendamiseks.

Pilvesalvestusruumi loomine

Firebase salvestab failid pilvesalvestuse ämbrisse. Selle loomiseks järgige järgmisi samme.

1. Projekti ülevaatelehel klõpsake nuppu Säilitamine vahekaart vasakpoolsel navigeerimispaneelil.
2. Klõpsake Alustama ja valige katserežiim.
3. Valige salvestusruumi vaikekoht ja klõpsake nuppu Valmis.

Nüüd olete valmis alustama failide Firebase'i salvestusruumi üleslaadimist.

Reageerimiseks lisage Firebase

Liikuge terminalis oma Reacti projekti kausta. Firebase SDK installimiseks käivitage järgmine käsk.

npm installida Firebase

Looge uus fail, firebaseConfig.jsja lähtestada Firebase.

importida { InitsialiseeriApp } alates "firebase/app";
importida { getStorage } alates "firebase/storage";
// Firebase'i lähtestamine
konst app = initsialiseeriApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projekti ID: <projekti ID>,
 ladustamisämber: <ladustamisämber>,
 messagingSenderId: <messaging SenderId>,
 appId: <appId>,
 mõõtmise ID: <mõõtmiseId>,
});
// Firebase'i salvestusruumi viide
konst salvestusruum = getStorage (rakendus);
eksportidavaikimisi ladustamine;

Kasutage Firebase'i rakenduse lähtestamiseks konfiguratsiooniobjekti, mille saite pärast Firebase'i projekti loomist.

Viimane rida ekspordib Firebase'i salvestusruumi viite, et pääseksite sellele eksemplarile ülejäänud rakendusest juurde.

Looge töötleja funktsioon piltide Firebase'i üleslaadimiseks

Üleslaadimisnupul klõpsamine peaks käivitama funktsiooni, mis vastutab faili Firebase'i salvestusruumi üleslaadimise eest. Loome selle funktsiooni.

sisse App.js, lisage funktsioon käepide üleslaadimine. Funktsioonis kontrollige, kas fail pole tühi, kuna kasutaja võib enne faili valimist klõpsata üleslaadimisnupul. Kui faili pole olemas, esitage hoiatus, mis käsib kasutajal kõigepealt fail üles laadida.

funktsioonikäepide üleslaadimine() {
 if (!fail) {
 hoiatus ("Palun valige esmalt fail!")
 }
}

Kui fail on olemas, looge talletusviide. Salvestusviide toimib kursorina pilves olevale failile, mida soovite kasutada.

Alustage rakenduses loodud salvestusteenuse importimisega firebaseConfig.js faili.

importida ladustamine alates "./firebaseConfig.js"

Import viide Firebase'i salvestuseksemplarist ja sisestage argumendina salvestusteenus ja failitee.

importida {ref} alates "firebase/storage"
funktsioonikäepide üleslaadimine() {
 if (!fail) {
 hoiatus ("Palun valige esmalt fail!")
 }
konst storageRef = ref (salvestusruum, `/failid/${file.name}`)
}

Järgmisena looge üleslaadimisülesanne, edastades Firebase'i salvestuseksemplari uploadBytesResumable() funktsiooni. Saate kasutada mitut meetodit, kuid see konkreetne võimaldab teil üleslaadimise peatada ja jätkata. See näitab ka edenemise värskendusi.

The uploadBytesResumable() funktsioon aktsepteerib salvestusviidet ja üleslaaditavat faili.

importida {
 ref,
 uploadBytesResumable 
} alates "firebase/storage";
funktsioonikäepide üleslaadimine() {
kui (!fail) {
 alert ("Valige kõigepealt fail!")
 }
konst storageRef = ref (salvestusruum, `/failid/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, fail);
}

Edenemise jälgimiseks ja vigade käsitlemiseks failide üleslaadimisel jälgige olekumuutusi, vigu ja lõpetamist.

importida {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} alates "Firebase/salvestusruum";
funktsioonikäepide üleslaadimine() {
 if (!fail) {
 hoiatus ("Palun valige esmalt fail!")
 }
konst storageRef = ref (salvestusruum,`/failid/${file.name}`)
konst uploadTask = uploadBytesResumable (storageRef, fail);
üleslaadimisülesanne.peal(
"olek_muutunud",
 (hetktõmmis) => {
konst protsenti = Matemaatika.round(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// värskendamise edenemine
 setPercent (protsent);
 },
 (err) => konsool.log (err),
 () => {
// allalaadimise URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsool.log (url);
 });
 }
 ); 
}

Siin, olek_muutunud sündmusel on kolm tagasihelistamise funktsiooni. Esimeses funktsioonis jälgite üleslaadimise edenemist ja laadite üles edenemise olekut. Teises tagasihelistamisfunktsioonis käsitlege viga, kui üleslaadimine ebaõnnestub.

Lõplik funktsioon käivitub pärast üleslaadimise lõpetamist ja hangib allalaadimise URL-i ning kuvab selle seejärel konsoolil. Päriselurakenduses saate selle andmebaasi salvestada.

Saate kuvada üleslaadimise edenemise oleku protsendi abil. Lisage ka an onClick sündmus üleslaadimisnupul, et käivitada käepide üleslaadimine funktsiooni.

importida { useState } alates "reageerida";
funktsiooniRakendus() {
konst [protsent, setPercent] = useState(0);
tagasi (
<div>
<sisendi tüüp="faili" onChange={handleChange} accept="" />
<nupp onClick={handleUpload}>Laadige Firebase'i üles</button>
<lk>{percent} "% tehtud"</lk>
</div>
 )
}

Siin on täielik kood App.js:

importida { useState } alates "reageerida";
importida { salvestusruum } alates "./firebaseConfig";
importida { ref, uploadBytesResumable, getDownloadURL } alates "firebase/storage";
funktsiooniRakendus() {
// Üleslaaditud faili salvestamise olek
 const [fail, setFile] = useState("");
// edenemine
konst [protsent, setPercent] = useState(0);
// Failide üleslaadimise sündmuse haldamine ja värskendamise olek
funktsioonikäepideMuuda(sündmus) {
setFile(sündmus.sihtmärk.failid[0]);
 }
konst handupload = () => {
 if (!fail) {
 hoiatus ("Palun laadi kõigepealt pilt üles!");
 }
konst storageRef = ref (salvestusruum, `/failid/${file.name}`);
// edenemist saab peatada ja jätkata. See näitab ka edenemise värskendusi.
// Võtab vastu salvestusviide ja üleslaaditava faili.
konst uploadTask = uploadBytesResumable (storageRef, fail);
üleslaadimisülesanne.peal(
"olek_muutunud",
 (hetktõmmis) => {
konst protsenti = Matemaatika.round(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// värskendamise edenemine
 setPercent (protsent);
 },
 (err) => konsool.log (err),
 () => {
// allalaadimise URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsool.log (url);
 });
 }
 );
 };
tagasi (
<div>
<sisendi tüüp="faili" onChange={handleChange} accept="/image/*" />
<nupp onClick={handleUpload}>Laadige Firebase'i üles</button>
<lk>{percent} "% tehtud"</lk>
</div>
 );
}
eksportidavaikimisi Rakendus;

Tehke Firebase'i salvestusruumiga rohkem

Failide üleslaadimine on Firebase'i salvestusruumi üks põhilisi funktsioone. Firebase'i salvestusruum võimaldab teil siiski teha muid asju. Saate oma failidele juurde pääseda, neid kuvada, korraldada ja kustutada.

Keerulisemas rakenduses võiksite kasutajaid autentida, et anda neile luba suhelda ainult nende failidega.

Kasutajate autentimine Firebase'i ja Reactiga

Loe edasi

Autori kohta