Хранилище Firebase обеспечивает простой способ хранения пользовательских данных, таких как изображения, видео и аудиофайлы. Он интегрируется с аутентификацией Firebase, поэтому вы можете контролировать, кто имеет доступ к файлам.

Вы можете хранить большие объемы контента с помощью Firebase, поскольку он автоматически масштабируется в соответствии с вашими потребностями. Его легко использовать со сторонней структурой, такой как библиотека React JavaScript.

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

Чтобы загрузить файлы на Хранилище Firebase, вам необходимо создать веб-форму, позволяющую пользователям выбирать файл из файловой системы.

Начать с создание React-приложения используя приложение create-реагировать. Запустите эту команду, чтобы сгенерировать проект React с именем firebase-загрузка:

npx Создайте-react-app firebase-upload

Для простоты вам нужна только кнопка ввода, которая принимает файлы, и кнопка загрузки. Заменить содержимое App.js со следующим кодом.

импорт {useState} от "реагировать"
функцияПриложение() {
 const [файл, setFile] = useState("");



// Обрабатывает ввод сдачамероприятиеи обновляет состояние
функцияручка изменения(мероприятие) {
setFile(мероприятие.цель.файлы[0]);
 }


возврат (
<див>
<тип ввода="файл" принять ="изображение/*" onChange={handleChange}/>
<кнопка>Загрузить в Firebase</button>
</div>
 );
}
экспортПо умолчанию Приложение;

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

Настроить 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:

нпм установить огневая база

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

импорт {инициализировать приложение} от "firebase/приложение";
импорт { получить хранилище } от "база/хранилище";
// Инициализировать Firebase
константа приложение = инициализировать приложение ({
 ключ API: <APIKey>,
 authDomain: <authDomain>,
 идентификатор проекта: <идентификатор проекта>,
 хранилищеВедро: <хранилищеВедро>,
 идентификатор отправителя сообщений: <идентификатор отправителя сообщений>,
 идентификатор приложения: <идентификатор приложения>,
 идентификатор измерения: <идентификатор измерения>,
});
// Ссылка на хранилище Firebase
константа хранилище = getStorage (приложение);
экспортПо умолчанию хранилище;

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

Последняя строка экспортирует ссылку на хранилище Firebase, чтобы вы могли получить доступ к этому экземпляру из остальной части вашего приложения.

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

Нажатие кнопки загрузки должно вызвать функцию, отвечающую за загрузку файла в хранилище Firebase. Давайте создадим эту функцию.

В App.js, добавьте функцию handleЗагрузить. В функции проверьте, не является ли файл пустым, поскольку пользователь может нажать кнопку загрузки перед выбором файла. Если файл не существует, создайте предупреждение, в котором пользователю будет предложено сначала загрузить файл.

функцияhandleЗагрузить() {
 если (! файл) {
 тревога("Сначала выберите файл!")
 }
}

Если файл существует, создайте ссылку на хранилище. Ссылка на хранилище действует как указатель на файл в облаке, с которым вы хотите работать.

Начните с импорта службы хранения, которую вы создали в firebaseConfig.js файл.

импорт хранилище от "./firebaseConfig.js"

импорт ссылка из экземпляра хранилища Firebase и передать службу хранилища и путь к файлу в качестве аргумента.

импорт {ссылка} от "огневая база/хранилище"
функцияhandleЗагрузить() {
 если (! файл) {
 тревога("Сначала выберите файл!")
 }
константа storageRef = ref (хранилище, `/файлы/${файл.имя}`)
}

Затем создайте задачу загрузки, передав экземпляр хранилища Firebase в загрузитьBytesResumable() функция. Есть несколько методов, которые вы можете использовать, но именно этот позволяет приостановить и возобновить загрузку. Он также предоставляет обновления прогресса.

загрузитьBytesResumable() функция принимает ссылку на хранилище и файл для загрузки.

импорт {
 ссылка,
 uploadBytesResumable 
} от "база/хранилище";
функцияhandleЗагрузить() {
если (!файл) {
 alert("Сначала выберите файл!")
 }
константа storageRef = ref (хранилище, `/файлы/${файл.имя}`)
константа uploadTask = uploadBytesResumable (storageRef, файл);
}

Чтобы отслеживать ход выполнения и обрабатывать ошибки при загрузке файла, прослушивайте изменения состояния, ошибки и завершение.

импорт {
 ссылка,
 загрузитьBytesResumable,
 getDownloadURL 
} от "огневая база/хранилище";
функцияhandleЗагрузить() {
 если (! файл) {
 тревога("Сначала выберите файл!")
 }


константа storageRef = ref (хранилище,`/файлы/${файл.имя}`)
константа uploadTask = uploadBytesResumable (storageRef, файл);


загрузитьЗадание.на(
"состояние_изменено",
 (моментальный снимок) => {
константа процент = Математика.круглый(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
// прогресс обновления
 установить процент (процент);
 },
 (ошибка) => консоль.log (ошибка),
 () => {
// URL-адрес загрузки
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
консоль.log (адрес);
 });
 }
 ); 
}

Здесь состояние_изменено событие имеет три функции обратного вызова. В первой функции вы отслеживаете ход загрузки и состояние загрузки. Во второй функции обратного вызова обработайте ошибку, если загрузка не удалась.

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

Вы можете отобразить состояние выполнения загрузки, используя процентное состояние. Также добавьте по щелчку событие на кнопке загрузки, чтобы вызвать handleЗагрузить функция.

импорт { состояние использования } от "реагировать";
функцияПриложение() {
константа [процент, setPercent] = useState(0);
возврат (
<див>
<тип ввода="файл" onChange={handleChange} принять="" />
<кнопка onClick={handleUpload}>Загрузить в Firebase</button>
<п>{процентов} "% сделано"</п>
</div>
 )
}

Вот полный код для App.js:

импорт { состояние использования } от "реагировать";
импорт { хранилище } от "./firebaseConfig";
импорт { ссылка, uploadBytesResumable, getDownloadURL } от "база/хранилище";
функцияПриложение() {
// Состояние для хранения загруженного файла
 const [файл, setFile] = useState("");


// прогресс
константа [процент, setPercent] = useState(0);


// Обработка события загрузки файла и состояния обновления
функцияручка изменения(мероприятие) {
setFile(мероприятие.цель.файлы[0]);
 }


константа handleUpload = () => {
 если (! файл) {
 тревога("Сначала загрузите изображение!");
 }


константа storageRef = ref (хранилище, `/файлы/${файл.имя}`);


// прогресс можно приостановить и возобновить. Он также предоставляет обновления прогресса.
// Получает ссылку на хранилище и файл для загрузки.
константа uploadTask = uploadBytesResumable (storageRef, файл);


загрузитьЗадание.на(
"состояние_изменено",
 (моментальный снимок) => {
константа процент = Математика.круглый(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );


// прогресс обновления
 установить процент (процент);
 },
 (ошибка) => консоль.log (ошибка),
 () => {
// URL-адрес загрузки
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
консоль.log (адрес);
 });
 }
 );
 };


возврат (
<див>
<тип ввода="файл" onChange={handleChange} принять="/image/*" />
<кнопка onClick={handleUpload}>Загрузить в Firebase</button>
<п>{процентов} "% сделано"</п>
</div>
 );
}
экспортПо умолчанию Приложение;

Делайте больше с хранилищем Firebase

Загрузка файлов — одна из основных функций хранилища Firebase. Однако есть и другие вещи, которые позволяет вам делать хранилище Firebase. Вы можете получать доступ, отображать, упорядочивать и удалять свои файлы.

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

Аутентификация пользователей с помощью Firebase и React

Читать дальше

ДелитьсяТвитнутьДелитьсяЭл. адрес

Похожие темы

  • Программирование
  • Реагировать
  • база данных
  • Веб-разработка

Об авторе

Мэри Гатони (опубликовано 20 статей)

Мэри Гатони — разработчик программного обеспечения, страстно любящий создавать технический контент, который не только информативен, но и привлекателен. Когда она не программирует и не пишет, ей нравится проводить время с друзьями и гулять на свежем воздухе.

Еще от Мэри Гатони

Подпишитесь на нашу рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться