Tiedostojen lataaminen Firebase-tallennustilaan React.js: n avulla

Firebase-tallennus tarjoaa yksinkertaisen tavan tallentaa käyttäjien luomaa tietoa, kuten kuvia, videoita ja äänitiedostoja. Se integroituu Firebase-todennuksen kanssa, joten voit hallita, kenellä on pääsy tiedostoihin.

Voit tallentaa suuria määriä sisältöä Firebasen avulla, koska se skaalautuu automaattisesti tarpeidesi mukaan. Sitä on helppo käyttää kolmannen osapuolen kehyksen, kuten React JavaScript -kirjaston, kanssa

Projektin asennus

Tiedostojen lataaminen kohteeseen Firebase-tallennustila, sinun on luotava verkkolomake, jonka avulla käyttäjät voivat valita tiedoston tiedostojärjestelmästä.

Aloita React-sovelluksen luominen käyttämällä Create-React-sovellusta. Suorita tämä komento luodaksesi React-projektin nimeltä firebase-lataus:

npx luoda-react-app firebase-upload

Yksinkertaisuuden vuoksi tarvitset vain syöttöpainikkeen, joka hyväksyy tiedostoja, ja latauspainikkeen. Vaihda sisältö App.js seuraavalla koodilla.

tuonti {useState} alkaen "reagoi"
toimintoSovellus() {
 const [tiedosto, setFile] = useState("");





instagram viewer

// Käsittelee syöttöä muuttaatapahtumaja päivitystila
toimintokahvaVaihda(tapahtuma) {
setFile(tapahtuma.kohde.tiedostot[0]);
 }
palata (
<div>
<syöttötyyppi="tiedosto" hyväksy ="kuva/*" onChange={handleChange}/>
<-painiketta>Lataa Firebaseen</button>
</div>
 );
}
viedäoletuksena Sovellus;

Yllä olevassa koodissa syöttö tagit hyväksyä attribuutti on asetettu sallimaan vain kuvat. The handleChange() toiminto käsittelee syötteen muutoksen ja päivittää tilan tallentaakseen poimitun tiedoston.

Ota Firebase käyttöön

Ennen kuin lataat tiedoston Firebase-tallennustilaan, sinun on luotava Firebase-projekti.

Luo Firebase-projekti

Luo Firebase-projekti noudattamalla alla olevia ohjeita:

1. Siirry kohtaan Firebase konsolisivu ja napsauta sitä Lisää projekti tai Luo projekti (jos luot projektia ensimmäistä kertaa).
2. Anna projektillesi haluamasi nimi ja napsauta Jatkaa.
3. Poista Google Analytics -valinta, koska et tarvitse sitä tähän projektiin, ja napsauta Luo projekti.
4. Klikkaus Jatkaa kun projekti on valmis.
5. Klikkaa verkkokuvake projektin yleiskatsaussivulla verkkosovelluksen rekisteröimiseksi.
6. Anna sovelluksellesi lempinimi ja napsauta Rekisteröidy.
7. Kopioi toimitettu konfigurointiobjekti. Tarvitset sitä yhdistääksesi sovelluksesi Firebaseen.

Luo pilvitallennustila

Firebase tallentaa tiedostot pilvitallennustilaan. Luo se seuraavasti:

1. Napsauta projektin yleiskatsaussivulla Varastointi -välilehti vasemmassa navigointipaneelissa.
2. Klikkaus Aloittaa ja valitse testitila.
3. Valitse oletusmuistin sijainti ja napsauta Tehty.

Olet nyt valmis aloittamaan tiedostojen lataamisen Firebase-tallennustilaan.

Lisää Firebase Reactiin

Siirry päätteessäsi React-projektikansioosi. Asenna Firebase SDK suorittamalla seuraava komento:

npm Asentaa Firebase

Luo uusi tiedosto, firebaseConfig.jsja alusta Firebase.

tuonti { alustaaApp } alkaen "firebase/app";
tuonti { getStorage } alkaen "firebase/storage";
// Alusta Firebase
konst app = alustaApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projektitunnus: <projektitunnus>,
 varastosäiliö: <varastokauha>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 mittaustunnus: <mittaustunnus>,
});
// Firebase-tallennustilaviittaus
konst tallennustila = getStorage (sovellus);
viedäoletuksena varastointi;

Käytä Firebase-projektin luomisen jälkeen saamaasi määritysobjektia Firebase-sovelluksen alustamiseen.

Viimeisellä rivillä viedään Firebase-tallennustilaviittaus, jotta voit käyttää kyseistä esiintymää sovelluksesi muusta osasta.

Luo käsittelijätoiminto kuvien lataamiseksi Firebaseen

Latauspainikkeen napsauttaminen käynnistää toiminnon, joka vastaa tiedoston lataamisesta Firebase-tallennustilaan. Luodaan se toiminto.

Sisään App.js, lisää funktio käsitteleLataa. Tarkista toiminnossa, ettei tiedosto ole tyhjä, koska käyttäjä saattaa napsauttaa latauspainiketta ennen tiedoston valitsemista. Jos tiedostoa ei ole olemassa, anna hälytys, joka kehottaa käyttäjää lataamaan tiedoston ensin.

toimintokäsitteleLataa() {
 if (!tiedosto) {
 hälytys ("Valitse ensin tiedosto!")
 }
}

Jos tiedosto on olemassa, luo tallennusviite. Tallennusviittaus toimii osoittimena pilvessä olevaan tiedostoon, jota haluat käyttää.

Aloita tuomalla tallennuspalvelu, jonka loit kohteessa firebaseConfig.js tiedosto.

tuonti varastointi alkaen "./firebaseConfig.js"

Tuonti viite Firebase-tallennusesiintymästä ja anna tallennuspalvelu ja tiedostopolku argumenttina.

tuonti {viite} alkaen "firebase/storage"
toimintokäsitteleLataa() {
 if (!tiedosto) {
 hälytys ("Valitse ensin tiedosto!")
 }
konst storageRef = ref (tallennustila, `/tiedostot/${tiedosto.nimi}`)
}

Luo seuraavaksi lataustehtävä välittämällä Firebase-tallennusinstanssi uploadBytesResumable() toiminto. Voit käyttää useita tapoja, mutta tällä tietyllä voit keskeyttää latauksen ja jatkaa sitä. Se paljastaa myös edistymispäivitykset.

The uploadBytesResumable() toiminto hyväksyy tallennusviitteen ja ladattavan tiedoston.

tuonti {
 viite,
 uploadBytesResumable 
} alkaen "firebase/storage";
toimintokäsitteleLataa() {
jos (!tiedosto) {
 alert("Valitse ensin tiedosto!")
 }
konst storageRef = ref (tallennustila, `/tiedostot/${tiedosto.nimi}`)
konst uploadTask = uploadBytesResumable (storageRef, tiedosto);
}

Voit seurata edistymistä ja käsitellä virheitä tiedoston latauksen aikana kuuntelemalla tilan muutoksia, virheitä ja valmistumista.

tuonti {
 viite,
 uploadBytesResumable,
 getDownloadURL 
} alkaen "firebase/tallennustila";
toimintokäsitteleLataa() {
 if (!tiedosto) {
 hälytys ("Valitse ensin tiedosto!")
 }
konst storageRef = ref (tallennustila,`/tiedostot/${tiedosto.nimi}`)
konst uploadTask = uploadBytesResumable (storageRef, tiedosto);
uploadTask.päällä(
"tila_muutettu",
 (kuva) => {
konst prosenttia = Matematiikka.pyöristää(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// päivityksen edistyminen
 setPercent (prosentti);
 },
 (err) => konsoli.log (err),
 () => {
// lataus-url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsoli.log (url);
 });
 }
 ); 
}

Tässä, tila_muutettu tapahtumassa on kolme takaisinsoittotoimintoa. Ensimmäisessä toiminnossa seuraat latauksen edistymistä ja lähetät edistymistilan. Toisessa takaisinsoittotoiminnossa käsittele virhe, jos lataus epäonnistuu.

Viimeinen toiminto suoritetaan, kun lataus on valmis, ja se saa lataus-URL-osoitteen ja näyttää sen sitten konsolissa. Tosielämän sovelluksessa voit tallentaa sen tietokantaan.

Voit näyttää latauksen edistymistilan käyttämällä prosentuaalista tilaa. Lisää myös an klikkaamalla tapahtuma latauspainikkeella käynnistääksesi käsitteleLataa toiminto.

tuonti { useState } alkaen "reagoi";
toimintoSovellus() {
konst [percent, setPercent] = useState(0);
palata (
<div>
<syöttötyyppi="tiedosto" onChange={handleChange} accept="" />
<button onClick={handleUpload}>Lataa Firebaseen</button>
<s>{prosentti} "% tehty"</s>
</div>
 )
}

Tässä on täydellinen koodi App.js:

tuonti { useState } alkaen "reagoi";
tuonti { tallennustila } alkaen "./firebaseConfig";
tuonti { ref, uploadBytesResumable, getDownloadURL } alkaen "firebase/storage";
toimintoSovellus() {
// Tila ladatun tiedoston tallentamiseksi
 const [tiedosto, setFile] = useState("");
// edistystä
konst [percent, setPercent] = useState(0);
// Käsittele tiedoston lataustapahtumaa ja päivitystilaa
toimintokahvaVaihda(tapahtuma) {
setFile(tapahtuma.kohde.tiedostot[0]);
 }
konst handleUpload = () => {
 if (!tiedosto) {
 hälytys ("Lataa ensin kuva!");
 }
konst storageRef = ref (tallennustila, `/tiedostot/${tiedosto.nimi}`);
// edistyminen voidaan keskeyttää ja jatkaa. Se paljastaa myös edistymispäivitykset.
// Vastaanottaa tallennusviitteen ja ladattavan tiedoston.
konst uploadTask = uploadBytesResumable (storageRef, tiedosto);
uploadTask.päällä(
"tila_muutettu",
 (kuva) => {
konst prosenttia = Matematiikka.pyöristää(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// päivityksen edistyminen
 setPercent (prosentti);
 },
 (err) => konsoli.log (err),
 () => {
// lataus-url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konsoli.log (url);
 });
 }
 );
 };
palata (
<div>
<syöttötyyppi="tiedosto" onChange={handleChange} accept="/image/*" />
<button onClick={handleUpload}>Lataa Firebaseen</button>
<s>{prosentti} "% tehty"</s>
</div>
 );
}
viedäoletuksena Sovellus;

Tee enemmän Firebase-tallennustilasta

Tiedostojen lataaminen on yksi Firebasen tallennustilan perusominaisuuksista. Firebase-tallennustilassa voit kuitenkin tehdä muitakin asioita. Voit käyttää, näyttää, järjestää ja poistaa tiedostojasi.

Monimutkaisemmassa sovelluksessa saatat haluta todentaa käyttäjät antaaksesi heille luvan käyttää vain tiedostojaan.

Käyttäjien todentaminen Firebasella & Reactilla

Lue Seuraava

Kirjailijasta