Этот учебник поможет создать загрузку файла в реагирующее приложение. Мы продемонстрируем пошаговый процесс загрузки реагирующего файла.
Мы будем использовать API-интерфейс nodejs для загрузки файла на сервер. Реагирующее приложение будет использовать для загрузки файла на стороне клиента и отправки файла на сервер node API.
React Загрузить файл в React
Давайте интегрируем компонент загрузки файла реакции в наше приложение реакции. Мы будем использовать приложение nodejs для загрузки файла на сервер. Пример Создать Nodejs API для загрузки файла с помощью Multer для загрузки файла на сервер.
Мы будем использовать следующие зависимости в этом проекте:
- Bootstrap 4: мы будем использовать bootstrap для пользовательского интерфейса.
- ReactToastify: эта библиотека используется для отображения предупреждений.
- axios : HTTP-клиент на основе Promise для браузера и node.js.
Как создать React-приложение
Давайте создадим реагирующее приложение с помощью командной строки. Следующая команда создаст реагирующее скретч-приложение -npx create-react-app react-file-upload
Мы перейдем в реактивный проект react-file-upload -cd react-file-upload
Теперь установим зависимости -
npm install bootstrap
npm install react-toastify
npm install axios
bootstrap помогает создать пользовательский интерфейс на основе bootstrap 4, react-toastify используется для отображения красивого уведомления в приложении реакции и axios для HTTP-клиента.
Теперь запустите приложение.npm start
Вы можете увидеть домашнюю страницу реакции в браузере https://localhost:3000.
Давайте создадим компонент загрузки файлов в это приложение.
Создать интерфейс загрузки файлов
Я взял ссылку из bootsnipp для пользовательского интерфейса, давайте добавим html в файл app.js.
Выше HTML-кода добавлен компонент ToastContainer для отображения уведомлений. Создано поле ввода файла для ввода данных пользователем и кнопка отправки для отправки запроса на сервер.
В поле ввода добавлено событие onchange и связанный с ним метод onChangeHandler для установки информации о файле в состояние.
Метод fileUploadHandler связан с отправкой события onclick. Этот метод отправляет запрос на сервер nodejs с помощью HTTP-клиента axios.
Теперь добавлен стиль загрузки формы css в файл app.css -
Компонент загрузки файла React
Мы создадим функцию загрузки реактивного файла в файл app.js.
Метод onChangeHandler берет имя файла из поля ввода файла. Также проверяйте файл, используя размер, вы можете добавить множество правил проверки для проверки файла.
Метод validateSize используется для проверки размера файла. Если размер превышен, выдается сообщение и отображается с помощью тостера.
Метод fileUploadHandler берет имя файла из состояния и отправляет запрос на сервер узла.
Первоначально опубликовано на https://www.js-tutorials.com 18 мая 2019 г.
