Как да качвате файлове във Firebase Storage с помощта на React.js

Съхранението на Firebase предоставя прост начин за съхранение на генерирани от потребителя данни като изображения, видеоклипове и аудио файлове. Той се интегрира с удостоверяването на Firebase, така че можете да контролирате кой има достъп до файловете.

Можете да съхранявате големи количества съдържание с помощта на Firebase, тъй като то автоматично се мащабира, за да отговаря на вашите нужди. Лесно е да се използва с рамка на трета страна като библиотеката React JavaScript

Настройка на проекта

За качване на файлове в Съхранение на Firebase, трябва да създадете уеб формуляр, който позволява на потребителите да избират файл от файловата система.

Започнете от създаване на приложение React с помощта на create-react-app. Изпълнете тази команда, за да генерирате проект React, наречен firebase-качване:

npx създавай-react-app firebase-upload

За да бъде просто, имате нужда само от бутон за въвеждане, който приема файлове, и бутон за качване. Заменете съдържанието на App.js със следния код.

внос {useState} 





instagram viewer

от "реагирам"
функцияап() {
 const [файл, setFile] = useState("");
// Обработва входа промянасъбитиеи състояние на актуализации
функцияhandleChange(събитие) {
setFile(събитие.цел.файлове[0]);
 }
връщане (
<раздел>
<тип вход="файл" приема ="изображение/*" onChange={handleChange}/>
<бутон>Качване във Firebase</button>
</div>
 );
}
износпо подразбиране Приложение;

В горния код, вход етикети приемам атрибутът е настроен да позволява само изображения. В handleChange() функцията обработва промяната на входа и актуализира състоянието, за да съхранява избрания файл.

Настройте Firebase

Преди да качите файла в хранилището на Firebase, трябва да създадете проект на Firebase.

Създайте проект на Firebase

Следвайте инструкциите по-долу, за да създадете проект на Firebase:

1. Отидете до Firebase конзолна страница и кликнете върху Добавете проект или Създайте проект (ако създавате проект за първи път).
2. Дайте на проекта си име по ваш избор и щракнете Продължи.
3. Премахнете избора на Google Analytics, тъй като не ви е необходим за този проект и щракнете Създайте проект.
4. Щракнете върху продължи след като проектът е готов.
5. Кликнете върху уеб икона на страницата за преглед на проекта, за да регистрирате уеб приложение.
6. Дайте на приложението си псевдоним и щракнете Регистрирам.
7. Копирайте предоставения конфигурационен обект. Ще ви е необходим, за да свържете приложението си с Firebase.

Създайте кофа за облачно съхранение

Firebase съхранява файлове в кофа за съхранение в облак. Следвайте следните стъпки, за да го създадете:

1. На страницата за преглед на проекта щракнете върху Съхранение раздел в левия навигационен панел.
2. Щракнете върху Първи стъпки и изберете тестов режим.
3. Изберете местоположението на кофата за съхранение по подразбиране и щракнете Свършен.

Вече сте готови да започнете да качвате файлове в хранилището на Firebase.

Добавете Firebase към React

Във вашия терминал отидете до папката на вашия проект React. Изпълнете следната команда, за да инсталирате Firebase SDK:

npm Инсталирай огнена база

Създайте нов файл, firebaseConfig.js, и инициализирайте Firebase.

внос { initializeApp } от "firebase/app";
внос { getStorage } от "firebase/storage";
// Инициализираме Firebase
const app = initializeApp ({
 apiKey: <apiKey>,
 authDomain: <authDomain>,
 идентификатор на проекта: <projectId>,
 кофа за съхранение: <кофа за съхранение>,
 messagingSenderId: <messagingSenderId>,
 appId: <appId>,
 идентификатор на измерване: <идентификатор на измерване>,
});
// Препоръка за съхранение на Firebase
const съхранение = getStorage (приложение);
износпо подразбиране съхранение;

Използвайте конфигурационния обект, който сте получили след създаването на проекта Firebase, за да инициализирате приложението Firebase.

Последният ред експортира препратката за съхранение на Firebase, така че да имате достъп до този екземпляр от останалата част от приложението си.

Създайте функция манипулатор за качване на изображенията във Firebase

Щракването върху бутона за качване трябва да задейства функцията, отговорна за качването на файла в хранилището на Firebase. Нека създадем тази функция.

В App.js, добавете функцията handleUpload. Във функцията проверете дали файлът не е празен, тъй като потребителят може да щракне върху бутона за качване, преди да избере файл. Ако файлът не съществува, повдигнете предупреждение, което казва на потребителя първо да качи файл.

функцияhandleUpload() {
 if (!file) {
 тревога("Моля, първо изберете файл!")
 }
}

Ако файлът съществува, създайте препратка за съхранение. Референцията за съхранение действа като указател към файла в облака, с който искате да работите.

Започнете с импортиране на услугата за съхранение, която сте създали в firebaseConfig.js файл.

внос съхранение от "./firebaseConfig.js"

Импортиране ref от екземпляра за съхранение на Firebase и предайте услугата за съхранение и пътя на файла като аргумент.

внос {ref} от "firebase/storage"
функцияhandleUpload() {
 if (!file) {
 тревога("Моля, първо изберете файл!")
 }
const storageRef = ref (съхранение, `/файлове/${file.name}`)
}

След това създайте задача за качване, като предадете екземпляра за съхранение на Firebase на uploadBytesResumable() функция. Има няколко метода, които можете да използвате, но този конкретен ви позволява да поставите на пауза и да възобновите качването. Той също така показва актуализации за напредъка.

В uploadBytesResumable() функцията приема препратката за съхранение и файла за качване.

внос {
 реф,
 uploadBytesResumable 
} от "firebase/storage";
функцияhandleUpload() {
ако (!файл) {
 alert("Моля, първо изберете файл!")
 }
const storageRef = ref (съхранение, `/файлове/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, файл);
}

За да наблюдавате напредъка и да обработвате грешки при качването на файла, слушайте за промени в състоянието, грешки и завършване.

внос {
 реф,
 uploadBytesResumable,
 getDownloadURL 
} от "firebase/storage";
функцияhandleUpload() {
 if (!file) {
 тревога("Моля, първо изберете файл!")
 }
const storageRef = ref (съхранение,`/файлове/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, файл);
uploadTask.На(
"състояние_променено",
 (моментна снимка) => {
const процент = математика.кръгъл(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// напредъкът на актуализиране
 setPercent (процент);
 },
 (грешка) => конзола.log (грешка),
 () => {
// URL за изтегляне
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
конзола.log (url);
 });
 }
 ); 
}

Ето, състояние_променено събитието има три функции за обратно извикване. В първата функция вие следите напредъка на качването и качвате състоянието на напредъка. Във втората функция за обратно извикване обработвайте грешка, ако качването е неуспешно.

Последната функция се изпълнява, след като качването приключи, получава URL адреса за изтегляне, след което го показва на конзолата. В приложение в реалния живот можете да го запишете в база данни.

Можете да покажете състоянието на напредъка на качването, като използвате процентното състояние. Също така добавете onClick събитие на бутона за качване, за да задействате handleUpload функция.

внос {useState} от "реагира";
функцияап() {
const [процент, setPercent] = useState(0);
връщане (
<раздел>
<тип вход="файл" onChange={handleChange} accept="" />
<бутон onClick={handleUpload}>Качване във Firebase</button>
<стр>{percent} "% Свършен"</стр>
</div>
 )
}

Ето пълния код за App.js:

внос {useState} от "реагира";
внос {хранилище} от "./firebaseConfig";
внос { ref, uploadBytesResumable, getDownloadURL } от "firebase/storage";
функцияап() {
// Състояние за съхраняване на качения файл
 const [файл, setFile] = useState("");
// напредък
const [процент, setPercent] = useState(0);
// Обработка събитие за качване на файл и състояние на актуализиране
функцияhandleChange(събитие) {
setFile(събитие.цел.файлове[0]);
 }
const handleUpload = () => {
 if (!file) {
 тревога("Моля, качете първо изображение!");
 }
const storageRef = ref (съхранение, `/файлове/${file.name}`);
// напредъкът може да се постави на пауза и да се възобнови. Той също така показва актуализации за напредъка.
// Получава препратката за съхранение и файла за качване.
const uploadTask = uploadBytesResumable (storageRef, файл);
uploadTask.На(
"състояние_променено",
 (моментна снимка) => {
const процент = математика.кръгъл(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// напредъкът на актуализиране
 setPercent (процент);
 },
 (грешка) => конзола.log (грешка),
 () => {
// URL за изтегляне
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
конзола.log (url);
 });
 }
 );
 };
връщане (
<раздел>
<тип вход="файл" onChange={handleChange} accept="/image/*" />
<бутон onClick={handleUpload}>Качване във Firebase</button>
<стр>{percent} "% Свършен"</стр>
</div>
 );
}
износпо подразбиране Приложение;

Правете повече с Firebase Storage

Качването на файлове е една от най-основните функции на хранилището на Firebase. Има обаче и други неща, които Firebase хранилището ви позволява да правите. Можете да осъществявате достъп, да показвате, организирате и изтривате вашите файлове.

В по-сложно приложение може да искате да удостоверите потребителите, за да им дадете разрешение да взаимодействат само с техните файлове.

Удостоверяване на потребители с Firebase & React

Прочетете Следващото

За автора