Fájlok feltöltése a Firebase tárhelyre a React.js használatával

A Firebase-tárhely egyszerű módot kínál a felhasználók által generált adatok, például képek, videók és hangfájlok tárolására. Integrálódik a Firebase hitelesítéssel, így Ön szabályozhatja, hogy ki férhet hozzá a fájlokhoz.

A Firebase segítségével nagy mennyiségű tartalmat tárolhat, mivel az automatikusan az Ön igényeihez igazodik. Egyszerűen használható harmadik féltől származó keretrendszerrel, például a React JavaScript könyvtárral

Projekt beállítása

Fájlok feltöltéséhez ide Firebase tárhely, létre kell hoznia egy webes űrlapot, amely lehetővé teszi a felhasználók számára, hogy fájlt válasszanak ki a fájlrendszerből.

Kezdje ezzel React alkalmazás létrehozása a create-react-app használatával. Futtassa ezt a parancsot a React projekt létrehozásához firebase-feltöltés:

npx teremt-react-app firebase-upload

Az egyszerűség kedvéért csak egy fájlokat fogadó beviteli és egy feltöltési gombra van szükség. Cserélje ki a tartalmát App.js a következő kóddal.

import {useState} tól től "reagál"
funkcióApp() {
 const [fájl, setFile] = useState("");





instagram viewer

// Kezeli a bevitelt változáseseményés frissítések állapota
funkciófogantyúChange(esemény) {
setFile(esemény.cél.fájlok[0]);
 }
Visszatérés (
<div>
<bemenet típusa="fájlt" elfogad ="kép/*" onChange={handleChange}/>
<gomb>Feltöltés Firebase-be</button>
</div>
 );
}
exportalapértelmezett App;

A fenti kódban a bemenet címkék elfogad attribútum úgy van beállítva, hogy csak képeket engedélyezzen. A handleChange() függvény kezeli a bemeneti változást, és frissíti az állapotot a kiválasztott fájl tárolására.

A Firebase beállítása

Mielőtt feltölti a fájlt a Firebase-tárhelyre, létre kell hoznia egy Firebase-projektet.

Hozzon létre egy Firebase-projektet

Kövesse az alábbi utasításokat Firebase-projekt létrehozásához:

1. Menj a Firebase konzol oldalt, és kattintson rá Projekt hozzáadása vagy Hozzon létre egy projektet (ha először hoz létre projektet).
2. Adjon nevet a projektnek, és kattintson rá Folytatni.
3. Törölje a Google Analytics kijelölését, mivel nincs rá szüksége ehhez a projekthez, majd kattintson a gombra Projekt létrehozása.
4. Kattintson Folytatni ha a projekt készen áll.
5. Kattintson a web ikon a projekt áttekintő oldalán webalkalmazás regisztrálásához.
6. Adjon az alkalmazásnak egy becenevet, és kattintson Regisztráció.
7. Másolja a megadott konfigurációs objektumot. Szüksége lesz rá az alkalmazás Firebase-hez való csatlakoztatásához.

Hozzon létre egy felhőtárhelyet

A Firebase a fájlokat egy felhőalapú tárolótárolóban tárolja. A létrehozásához kövesse az alábbi lépéseket:

1. A projekt áttekintő oldalán kattintson a gombra Tárolás fület a bal oldali navigációs panelen.
2. Kattintson Fogj neki és válassza ki teszt üzemmódban.
3. Válassza ki az alapértelmezett tárolóhelyet, és kattintson a gombra Kész.

Készen áll a fájlok Firebase-tárhelyre való feltöltésére.

Adja hozzá a Firebase-t a Reacthoz

A terminálon keresse meg a React projekt mappáját. Futtassa a következő parancsot a Firebase SDK telepítéséhez:

npm telepítés tűzbázis

Hozzon létre egy új fájlt, firebaseConfig.js, és inicializálja a Firebase-t.

import { inicializálja az alkalmazást } tól től "firebase/app";
import { getStorage } tól től "firebase/tárhely";
// A Firebase inicializálása
const app = inicializálásApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 projektazonosító: <projektId>,
 tárolási vödör: <tárolás Vödör>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 mérésazonosító: <mérésId>,
});
// Firebase tárhelyreferencia
const tárolás = getStorage (app);
exportalapértelmezett tárolás;

Használja a Firebase-projekt létrehozása után kapott konfigurációs objektumot a Firebase alkalmazás inicializálásához.

Az utolsó sor exportálja a Firebase tárhelyreferenciát, így az alkalmazás többi részéből is elérheti a példányt.

Hozzon létre egy kezelő függvényt a képek Firebase-be való feltöltéséhez

A feltöltés gombra kattintva aktiválja azt a funkciót, amely felelős a fájl Firebase tárhelyre való feltöltéséért. Hozzuk létre ezt a függvényt.

Ban ben App.js, adja hozzá a függvényt handleFeltöltés. A funkcióban ellenőrizze, hogy a fájl nem üres-e, mivel a felhasználó rákattinthat a feltöltés gombra, mielőtt kiválaszt egy fájlt. Ha a fájl nem létezik, adjon ki figyelmeztetést, amely arra utasítja a felhasználót, hogy először töltse fel a fájlt.

funkcióhandleFeltöltés() {
 if (!file) {
 éber("Kérjük, először válasszon fájlt!")
 }
}

Ha a fájl létezik, hozzon létre egy tárolási hivatkozást. A tárolási hivatkozás mutatóként működik a felhőben lévő fájlra, amelyen dolgozni szeretne.

Kezdje azzal, hogy importálja a tárhelyszolgáltatást, amelyet itt hozott létre firebaseConfig.js fájlt.

import tárolás tól től "./firebaseConfig.js"

Importálás ref a Firebase tárolópéldányból, és argumentumként adja meg a tárolási szolgáltatást és a fájl elérési útját.

import {ref} tól től "Firebase/Storage"
funkcióhandleFeltöltés() {
 if (!file) {
 éber("Kérjük, először válasszon fájlt!")
 }
const storageRef = ref (tárhely, `/fájlok/${fájl.név}`)
}

Ezután hozzon létre egy feltöltési feladatot a Firebase tárolópéldány átadásával a uploadBytesResumable() funkció. Számos módszert használhat, de ez a konkrét módszer lehetővé teszi a feltöltés szüneteltetését és folytatását. Az előrehaladásról szóló frissítéseket is megjeleníti.

A uploadBytesResumable() függvény elfogadja a tárolási hivatkozást és a feltöltendő fájlt.

import {
 ref,
 uploadBytesResumable 
} tól től "firebase/tárhely";
funkcióhandleFeltöltés() {
ha (!fájl) {
 alert ("Kérjük, először válasszon egy fájlt!")
 }
const storageRef = ref (tárhely, `/fájlok/${fájl.név}`)
const uploadTask = uploadBytesResumable (storageRef, fájl);
}

A folyamat nyomon követéséhez és a hibák kezeléséhez a fájlfeltöltés során figyelje az állapotváltozásokat, hibákat és befejezést.

import {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} tól től "firebase/tárhely";
funkcióhandleFeltöltés() {
 if (!file) {
 éber("Kérjük, először válasszon fájlt!")
 }
const storageRef = ref (tárhely,`/fájlok/${fájl.név}`)
const uploadTask = uploadBytesResumable (storageRef, fájl);
uploadTask.tovább(
"állapot_változott",
 (pillanatfelvétel) => {
const százalék = Math.kerek(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// frissítés folyamata
 setPercent (százalék);
 },
 (hiba) => konzol.log (hiba),
 () => {
// letöltési url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konzol.log (url);
 });
 }
 ); 
}

Itt, a állapot_változott az eseménynek három visszahívási funkciója van. Az első funkcióban nyomon követheti a feltöltés folyamatát, és feltölti a folyamat állapotát. A második visszahívási funkcióban kezeljen egy hibát, ha a feltöltés sikertelen.

A végső függvény a feltöltés befejezése után fut le, megkapja a letöltési URL-t, majd megjeleníti a konzolon. Egy valós alkalmazásban elmentheti egy adatbázisba.

A százalékos állapot használatával megjelenítheti a feltöltés állapotát. Adjon hozzá egy kattintásra eseményt a feltöltés gombra, hogy elindítsa a handleFeltöltés funkció.

import { useState } tól től "reagál";
funkcióApp() {
const [percent, setPercent] = useState(0);
Visszatérés (
<div>
<bemenet típusa="fájlt" onChange={handleChange} accept="" />
<gomb onClick={handleUpload}>Feltöltés Firebase-be</button>
<p>{százalék} "% Kész"</p>
</div>
 )
}

Itt van a teljes kód App.js:

import { useState } tól től "reagál";
import { tárhely } tól től "./firebaseConfig";
import { ref, uploadBytesResumable, getDownloadURL } tól től "firebase/tárhely";
funkcióApp() {
// Állapot a feltöltött fájl tárolására
 const [fájl, setFile] = useState("");
// haladás
const [percent, setPercent] = useState(0);
// Fájlfeltöltési esemény és frissítési állapot kezelése
funkciófogantyúChange(esemény) {
setFile(esemény.cél.fájlok[0]);
 }
const handleUpload = () => {
 if (!file) {
 éber("Kérjük, először töltsön fel egy képet!");
 }
const storageRef = ref (tárhely, `/fájlok/${fájl.név}`);
// a haladás szüneteltethető és folytatható. Az előrehaladásról szóló frissítéseket is megjeleníti.
// Megkapja a tárolási hivatkozást és a feltöltendő fájlt.
const uploadTask = uploadBytesResumable (storageRef, fájl);
uploadTask.tovább(
"állapot_változott",
 (pillanatfelvétel) => {
const százalék = Math.kerek(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// frissítés folyamata
 setPercent (százalék);
 },
 (hiba) => konzol.log (hiba),
 () => {
// letöltési url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
konzol.log (url);
 });
 }
 );
 };
Visszatérés (
<div>
<bemenet típusa="fájlt" onChange={handleChange} accept="/image/*" />
<gomb onClick={handleUpload}>Feltöltés Firebase-be</button>
<p>{százalék} "% Kész"</p>
</div>
 );
}
exportalapértelmezett App;

Többet tehet a Firebase Storage segítségével

A fájlok feltöltése a Firebase-tárhely egyik legalapvetőbb funkciója. Vannak azonban más dolgok is, amelyeket a Firebase-tárhely lehetővé tesz. Hozzáférhet, megjelenítheti, rendszerezheti és törölheti fájljait.

Egy bonyolultabb alkalmazásban érdemes lehet hitelesíteni a felhasználókat, hogy csak a fájljaikkal kommunikálhassanak.

Felhasználók hitelesítése Firebase és React segítségével

Olvassa el a következőt

A szerzőről