Асинхронная загрузка файлов с помощью Node и React

Асинхронная загрузка файлов с помощью Node и React

От автора: если вы новичок в веб-разработке, асинхронная загрузка файлов может показаться сложной задачей. Но по сути, это еще один запрос AJAX API. Если вас не просят оптимизировать меди файлы на стороне клиента или выполнить некие проверки целостности, это легко сделать. В этом уроке я расскажу в загрузке файлов через AJAX из front end React, так как React – одна из популярнейших библиотек представлений на данный момент. Для работы с сервером мы обсудим вариант с Node.js и CDN.

Асинхронная загрузка файлов с помощью Node и React

Необходимые условия

Код проекта доступен в моем репозитории на Github. Или же вы можете начать с нуля и следовать шагам.

Необходимо настроить Node.js, если это еще не сделано. Далее с помощью NPM нужно установить React.js и зависимые библиотеки. Я буду использовать create-react-app для шаблона React.

Далее в уроке будем делать AJAX запросы через axios. Рекомендую установить его.

Для создания настраиваемого экспресс сервера будем использовать express-generator. Его можно использовать как стартовую точку для back end.

Я установлю пару дополнительных пакетов:

cors  — для cross origin запросов

nodemon – для слежки за изменениями в файлах

express-fileupload – для упрощения загрузки файлов

Ниже представлена измененная версия app.js. Мы всего лишь добавили cors и express-fileupload.

По умолчанию клиент и сервер запускаются на порту 3000. Серверный порт можно изменить в файле form-api/bin/www. Порт можно поменять на 8000.

Структурирование компонентов React

React использует компоненты для создания UI. Файл index.js в forms/src является стартовой точкой. Он монтирует компонент приложения и проводит его рендер. Замените код в файле App.js:

Мы еще не создали файл FileUpload.jsx. Давайте это исправим. У нас есть 2 варианта создания загрузчика файлов. Можно использовать HTML5 drag & drop или стандартный способ.

Загрузка файлов через HTML5 загрузчик

Для этого способа есть библиотека react-dropzone, встроенная в React. Для рендера зоны HTML5 Drag ’n’ Drop можно использовать компонент Dropzone. После установки библиотеки через yarn добавьте react-dropzone. Вы сможете делать такие вещи:

Для обновления состояния или посылки AJAX запроса на загрузку файла необходимо написать метод onDrop.

Или можно использовать традиционный метод, а также их смесь.

Традиционная загрузка файлов через формы

Традиционный загрузчик файлов использует тег input с type=”file” и необязательный интерфейс FormData. Наша форма:

Будем использовать ref для получения значения поля и его хранения в виде свойства объекта. Рекомендую почитать о ref на reactjs.org, если вы не использовали их.

Мы еще не определили метод handleUpload. handleUpload делает API запросы на сервер, и если запрос успешен, устанавливает состояние, чтобы пользователь понял, что запрос прошел успешно.

Разберем код. Сначала мы создаем объект FormData и наполняем его парами ключ/значение из данных формы. Далее с помощью axios мы делаем запрос POST AJAX на сервер. Если все хорошо, сервер возвращает тело файла, с помощью которого можно сформировать ссылку на изображение.

Создание экспресс сервера для обработки запросов

Если нажать на кнопку Submit, в консоли появится ошибка, так как мы еще не настроили сервер для принятия POST запросов. Я буду обрабатывать загрузку файлов через библиотеку express-fileupload. Мы уже установили ее ранее.

Добавьте код ниже в файл app.js экспресс сервера.

Мы создали новый экспресс промежуточный слой. Промежуточный слой срабатывает, когда запрос пытается получить доступ к ресурсу ‘/upload’. Функция этого слоя имеет доступ к 3 объектам req, res и next. В объекте req хранится наш файл и его название.

Далее мы присваиваем файл объекту fileUpload. Файл сохраняется в публичной папке. Если есть какие-то ошибки, мы вернем код 500. Иначе сервер вернет путь к файлу.

Загрузка файла на CDN

Прямо сейчас мы разместим файлы в публичной директории. Это будет работать для нашего приложения, но для большинства реальных сценариев это будет не так идеально. Файлы можно сохранить в базу данных или загрузить на CDN типа Cloudinary или Amazon S3. Если вы работает с изображениями, то можно воспользоваться техниками оптимизации изображений на CDN для уменьшения размера изображений без существенной потери качества. В серверный код необходимо добавить вызов axios:

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

Заключение

На сегодня все. Загрузка файлов в React очень простая. Можете думать, что это очередное поле формы. Однако если вы делаете все с нуля, со стороны сервера все становится немного сложнее. Чтобы не загружать соединение вам придется хранить файлы в базе данных или использовать CDN. Надеюсь, урок был полезен. Делитесь мыслями в комментариях.

Автор: Manjunath M

Источник: //codeburst.io/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: