Kaip įkelti failus į „Firebase“ saugyklą naudojant React.js

„Firebase“ saugykla yra paprastas būdas saugoti naudotojo sukurtus duomenis, pvz., vaizdus, ​​vaizdo įrašus ir garso failus. Jis integruojamas su „Firebase“ autentifikavimu, todėl galite valdyti, kas turi prieigą prie failų.

Naudodami „Firebase“ galite saugoti didelį kiekį turinio, nes ji automatiškai keičiasi pagal jūsų poreikius. Tai paprasta naudoti su trečiosios šalies sistema, tokia kaip „React JavaScript“ biblioteka

Projekto sąranka

Norėdami įkelti failus į „Firebase“ saugykla, turite sukurti žiniatinklio formą, kuri leistų vartotojams pasirinkti failą iš failų sistemos.

Pradėkite nuo sukurti programą „React“. naudojant programą sukurti-reaguoti. Vykdykite šią komandą, kad sukurtumėte React projektą, vadinamą „Firebase“ įkėlimas:

npx sukurti-react-app firebase-upload

Kad viskas būtų paprasta, jums reikia tik įvesties mygtuko, kuris priima failus, ir įkėlimo mygtuko. Pakeiskite turinį App.js su tokiu kodu.

importuoti {useState} iš "reaguoti"
funkcijaProgramėlė() {
 const [failas, setFile] = useState("");





instagram viewer

// Valdo įvestį pakeistirenginysir atnaujinimų būsena
funkcijarankenaKeisti(renginys) {
setFile(renginys.taikinys.failai[0]);
 }
grąžinti (
<div>
<įvesties tipas ="failą" priimti ="vaizdas/*" onChange={handleChange}/>
<mygtuką>Įkelti į „Firebase“.</button>
</div>
 );
}
eksportuotinumatytas Programėlė;

Aukščiau pateiktame kode įvestis žymės priimti atributas nustatytas leisti tik vaizdus. The rankenaChange() funkcija apdoroja įvesties pakeitimą ir atnaujina būseną, kad išsaugotų pasirinktą failą.

Nustatykite „Firebase“.

Prieš įkeldami failą į „Firebase“ saugyklą, turite sukurti „Firebase“ projektą.

Sukurkite „Firebase“ projektą

Norėdami sukurti „Firebase“ projektą, vadovaukitės toliau pateiktomis instrukcijomis.

1. Eikite į Firebase konsolės puslapį ir spustelėkite Pridėti projektą arba Sukurti projektą (jei projektą kuriate pirmą kartą).
2. Suteikite savo projektui pasirinktą pavadinimą ir spustelėkite Tęsti.
3. Panaikinkite Google Analytics pasirinkimą, nes jums jo nereikia šiam projektui ir spustelėkite Sukurti projektą.
4. Spustelėkite Tęsti kai projektas bus paruoštas.
5. Spustelėkite ant žiniatinklio piktograma projekto apžvalgos puslapyje, kad užregistruotumėte žiniatinklio programą.
6. Suteikite programai slapyvardį ir spustelėkite Registruotis.
7. Nukopijuokite pateiktą konfigūracijos objektą. Jo reikės norint prijungti programą prie „Firebase“.

Sukurkite saugyklos debesyje talpyklą

„Firebase“ saugo failus debesies saugykloje. Norėdami jį sukurti, atlikite šiuos veiksmus:

1. Projekto apžvalgos puslapyje spustelėkite Sandėliavimas skirtuką kairiajame naršymo skydelyje.
2. Spustelėkite Pradėti ir pasirinkite testavimo režimas.
3. Pasirinkite numatytąją saugyklos vietą ir spustelėkite padaryta.

Dabar esate pasirengę pradėti įkelti failus į „Firebase“ saugyklą.

Pridėkite „Firebase“ prie „React“.

Savo terminale eikite į savo „React“ projekto aplanką. Norėdami įdiegti „Firebase“ SDK, paleiskite šią komandą:

npm diegti ugnies bazė

Sukurti naują failą, firebaseConfig.jsir inicijuokite „Firebase“.

importuoti { inicializuoti programą } iš „firebase/app“;
importuoti { getStorage } iš „firebase/storage“;
// Inicijuoti „Firebase“.
konst app = inicializuotiApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projekto ID: <projekto ID>,
 saugojimo kibiras: <saugojimo kibiras>,
 MessagingSenderId: <pranešimų siuntimo ID>,
 appId: <appId>,
 matavimo ID: <matavimo ID>,
});
// Firebase saugyklos nuoroda
konst saugykla = getStorage (programėlė);
eksportuotinumatytas saugojimas;

Norėdami inicijuoti „Firebase“ programą, naudokite konfigūracijos objektą, kurį gavote sukūrę „Firebase“ projektą.

Paskutinėje eilutėje eksportuojama „Firebase“ saugyklos nuoroda, kad galėtumėte pasiekti tą egzempliorių iš likusios programos.

Sukurkite tvarkyklės funkciją, kad įkeltumėte vaizdus į „Firebase“.

Spustelėjus įkėlimo mygtuką turėtų būti suaktyvinta funkcija, atsakinga už failo įkėlimą į „Firebase“ saugyklą. Sukurkime šią funkciją.

Į App.js, pridėkite funkciją rankenaĮkelti. Funkcijoje patikrinkite, ar failas nėra tuščias, nes vartotojas gali spustelėti įkėlimo mygtuką prieš pasirinkdamas failą. Jei failo nėra, iškvieskite įspėjimą, kuris lieptų vartotojui pirmiausia įkelti failą.

funkcijarankenaĮkelti() {
 if (!file) {
 budrus("Pirmiausia pasirinkite failą!")
 }
}

Jei failas yra, sukurkite saugyklos nuorodą. Saugyklos nuoroda veikia kaip rodyklė į failą debesyje, kurį norite valdyti.

Pradėkite importuodami saugyklos paslaugą, kurią sukūrėte firebaseConfig.js failą.

importuoti saugykla iš "./firebaseConfig.js"

Importuoti ref iš Firebase saugyklos egzemplioriaus ir kaip argumentą nurodykite saugyklos paslaugą bei failo kelią.

importuoti {ref} iš "Firebase / Storage"
funkcijarankenaĮkelti() {
 if (!file) {
 budrus("Pirmiausia pasirinkite failą!")
 }
konst storageRef = ref (saugykla, `/failai/${failo.vardas}`)
}

Tada sukurkite įkėlimo užduotį perduodant „Firebase“ saugyklos egzempliorių uploadBytesResumable() funkcija. Galite naudoti kelis metodus, tačiau šis konkretus leidžia pristabdyti ir tęsti įkėlimą. Jame taip pat pateikiami progreso atnaujinimai.

The uploadBytesResumable() funkcija priima saugyklos nuorodą ir failą, kurį reikia įkelti.

importuoti {
 ref,
 uploadBytesResumable 
} iš „firebase/storage“;
funkcijarankenaĮkelti() {
jeigu (!failas) {
 įspėjimas ("Pirmiausia pasirinkite failą!")
 }
konst storageRef = ref (saugykla, `/failai/${failo.vardas}`)
konst uploadTask = uploadBytesResumable (storageRef, failas);
}

Norėdami stebėti eigą ir tvarkyti klaidas įkeliant failą, klausykite būsenos pasikeitimų, klaidų ir užbaigimo.

importuoti {
 ref,
 įkelti baitų tęstinumą,
 getDownloadURL 
} iš "Firebase / saugykla";
funkcijarankenaĮkelti() {
 if (!file) {
 budrus("Pirmiausia pasirinkite failą!")
 }
konst storageRef = ref (saugykla,`/failai/${failo.vardas}`)
konst uploadTask = uploadBytesResumable (storageRef, failas);
įkėlimo užduotis.įjungta(
"būsena_pakeista",
 (momentinė nuotrauka) => {
konst procentai = Matematika.round(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// atnaujinimo eiga
 setPercent (procentas);
 },
 (klysta) => konsolė.log (err),
 () => {
// atsisiuntimo URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsolė.log (url);
 });
 }
 ); 
}

Čia, būsena_pakeista įvykis turi tris atgalinio skambinimo funkcijas. Pirmoje funkcijoje stebite įkėlimo eigą ir įkeliate eigos būseną. Naudodami antrąją atgalinio skambinimo funkciją, ištaisykite klaidą, jei įkėlimas nepavyksta.

Galutinė funkcija paleidžiama, kai įkėlimas baigtas, gauna atsisiuntimo URL, tada parodo jį konsolėje. Realioje programoje galite išsaugoti ją duomenų bazėje.

Galite rodyti įkėlimo eigos būseną naudodami procentinę būseną. Taip pat pridėkite an paspaudus įvykį įkėlimo mygtuke, kad suaktyvintumėte rankenaĮkelti funkcija.

importuoti { useState } iš „reaguoti“;
funkcijaProgramėlė() {
konst [percent, setPercent] = useState(0);
grąžinti (
<div>
<įvesties tipas ="failą" onChange={handleChange} accept="" />
<mygtukas onClick={handleUpload}>Įkelti į „Firebase“.</button>
<p>{percent} "% padaryta"</p>
</div>
 )
}

Čia yra visas kodas App.js:

importuoti { useState } iš „reaguoti“;
importuoti { saugykla } iš "./firebaseConfig";
importuoti { ref, uploadBytesResumable, getDownloadURL } iš „firebase/storage“;
funkcijaProgramėlė() {
// Būsena saugoti įkeltą failą
 const [failas, setFile] = useState("");
// progresas
konst [percent, setPercent] = useState(0);
// Tvarkyti failo įkėlimo įvykį ir atnaujinimo būseną
funkcijarankenaKeisti(renginys) {
setFile(renginys.taikinys.failai[0]);
 }
konst handleUpload = () => {
 if (!file) {
 budrus("Pirmiausia įkelkite vaizdą!");
 }
konst storageRef = ref (saugykla, `/failai/${failo.vardas}`);
// pažangą galima pristabdyti ir tęsti. Jame taip pat pateikiami progreso atnaujinimai.
// Gauna saugyklos nuorodą ir failą, kurį reikia įkelti.
konst uploadTask = uploadBytesResumable (storageRef, failas);
įkėlimo užduotis.įjungta(
"būsena_pakeista",
 (momentinė nuotrauka) => {
konst procentai = Matematika.round(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// atnaujinimo eiga
 setPercent (procentas);
 },
 (klysta) => konsolė.log (err),
 () => {
// atsisiuntimo URL
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsolė.log (url);
 });
 }
 );
 };
grąžinti (
<div>
<įvesties tipas ="failą" onChange={handleChange} accept="/image/*" />
<mygtukas onClick={handleUpload}>Įkelti į „Firebase“.</button>
<p>{percent} "% padaryta"</p>
</div>
 );
}
eksportuotinumatytas Programėlė;

Nuveikite daugiau naudodami „Firebase Storage“.

Failų įkėlimas yra viena iš pagrindinių „Firebase“ saugyklos funkcijų. Tačiau yra ir kitų dalykų, kuriuos „Firebase“ saugykla leidžia atlikti. Galite pasiekti, rodyti, tvarkyti ir ištrinti failus.

Sudėtingesnėje programoje galbūt norėsite autentifikuoti vartotojus, kad suteiktumėte jiems leidimą bendrauti tik su jų failais.

Naudotojų autentifikavimas naudojant „Firebase“ ir „React“.

Skaitykite toliau

Apie autorių