Как загружать файлы в React с помощью NodeJS и Express
2 года назад·3 мин. на чтение
В этой статье рассмотрим как загрузить файлы в React использованием Express в качестве бэкенда.
Создание бэкенда на Express
Во-первых, мы создаем POST API с использованием NodeJS и Express, который поможет нам загружать файлы (изображения, pdf и т. д.) на внутренний сервер.Настройка серверного проекта
Давайте настроим бэкенд проект NodeJS, выполнив следующие команды одну за другой.mkdir fileupload cd fileupload npm init -y
Установка пакетов
Теперь нам нужно установить четыре пакета:express
, express-fileupload
, cors
и nodemon
.
Выполните приведенную ниже команду, чтобы установить пакеты.
Теперь откройте папкуnpm i express express-fileupload cors nodemon
fileupload
в вашем любимом редакторе кода и создайте новый файл с именем server.js
.
Добавьте следующий код в файл server.js
.
В приведенном выше коде мы сначала импортировали три пакета:// server.js const express = require('express'); const fileUpload = require('express-fileupload'); const cors = require('cors') const app = express(); // middleware app.use(express.static('public')); // для доступа к файлам в папке public app.use(cors()); app.use(fileUpload()); // API для загрузки файлов app.post('/upload', (req, res) => { if (!req.files) { return res.status(500).send({ msg: "file is not found" }) } const myFile = req.files.file; // метод mv() помещает файл в папку public myFile.mv(`${__dirname}/public/${myFile.name}`, function (err) { if (err) { console.log(err) return res.status(500).send({ msg: "Error occurred" }); } // возвращаем ответ с именем файла и его расположением return res.send({name: myFile.name, path: `/${myFile.name}`}); }); }) app.listen(4500, () => { console.log('server is running at port 4500'); })
express
, express-fileupload
и cors
, а затем создали приложение express вызвав функцию express()
Наш маршрут POST API - /upload
.
Мы помещаем файлы в общую папку public
. Для этого нам нужно создать папку public
внутри нашего бэкенд-проекта.
Добавление скриптов
Чтобы запускать и перезапускать сервер мы используемnodemon
. Откройте файл package.json
и добавьте следующий код в scripts
.
Теперь запустите сервер, выполнив команду"server": "nodemon server.js"
npm run server
в терминале.
Создание приложения React
Давайте создадим новое React приложение, выполнив следующую команду.Теперь измените текущий рабочий каталог, выполнив приведенную ниже команду.npx create-react-app react-fileupload
cd react-fileupload
Установка библиотеки Axios
Нам также необходимо установить клиентскую библиотекуaxios
, которая используется для выполнения http-запросов.
npm i axios
Создание компонента загрузки файлов
Откройте папкуreact-fileupload
в своем любимом редакторе кода и создайте новый файл с именем fileupload.js
внутри папки src
.
Теперь добавьте следующий код.
В приведенном выше коде мы использовали хуки react для управления состоянием, и у нас есть две функции:// fileupload.js import React, { useRef, useState } from 'react'; import axios from 'axios'; function FileUpload() { // для хранения загруженного файла const [file, setFile] = useState(''); // для хранения ответа от бекенда const [data, getFile] = useState({ name: "", path: "" }); const [progress, setProgess] = useState(0); // progessbar const el = useRef(); // для доступа к инпуту const handleChange = (e) => { setProgess(0) const file = e.target.files[0]; // доступ к файлу console.log(file); setFile(file); // сохранение файла } const uploadFile = () => { const formData = new FormData(); formData.append('file', file); // добавление файла axios.post('http://localhost:4500/upload', formData, { onUploadProgress: (ProgressEvent) => { let progress = Math.round( ProgressEvent.loaded / ProgressEvent.total * 100 ) + '%'; setProgess(progress); } }).then(res => { console.log(res); getFile({ name: res.data.name, path: 'http://localhost:4500' + res.data.path }) }).catch(err => console.log(err)) } return ( <div> <div className="file-upload"> <input type="file" ref={el} onChange={handleChange} /> <div className="progessBar" style={{ width: progress }}> {progress} </div> <button onClick={uploadFile} className="upbutton"> Upload </button> <hr /> {/* для показа полученного изображения */} {data.path && <img src={data.path} alt={data.name} />} </div> </div> ); } export default FileUpload;
handleChange
и uploadFile
.
handleChange
вызывается после того, как пользователь выбрал файл.
Функция uploadFile()
используется для загрузки файла в наш /upload
api.
Существует также индикатор выполнения, который показывает прогресс загрузки файла на сервер, а также мы отображаем изображение после получения ответа от сервера.
Добавление стилей css
Добавьте следующие стили в файлApp.css
.
Теперь импортируйте компонент.App { margin: 2rem auto; max-width: 800px; } img { width: 500px; height: 500px; object-fit: contain; } .progessBar { height: 1rem; width: 0%; background-color: rgb(68, 212, 231); color: white; padding:2px } .file-upload { box-shadow: 2px 2px 2px 2px #ccc; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; font-size: 1rem; } input , div , button{ margin-top: 2rem; } .upbutton { width: 5rem; padding: .5rem; background-color: #2767e9; color: aliceblue; font-size: 1rem; cursor: pointer; }
FileUpload
в файл App.js
.
Запустите приложение React, запустив// App.js import React from 'react'; import FileUpload from './fileupload'; import './App.css'; function App() { return ( <div className="App"> <FileUpload /> </div > ); } export default App;
npm start
.Работа с локальным хранилищем (localStorage) в React
месяц назад·2 мин. на чтение
В этой статье мы рассмотрим, как использовать локальное хранилище (localStorage) в React для сохранения данных между сессиями.
Веб-приложения, созданные на базе React, часто требуют сохранения данных между сеансами работы пользователя. Например, это может быть информация о предпочтениях пользователя, настройках приложения или состоянии компонентов. Для этих целей можно использовать локальное хранилище (localStorage) браузера.
LocalStorage - это механизм хранения данных, который позволяет сохранять пары ключ-значение в браузере пользователя. Он доступен во всех современных браузерах и предоставляет простой API для работы с данными.
В этой статье мы рассмотрим, как работать с локальным хранилищем в React для функциональных компонентов.
Шаг 1: Установка и настройка проекта
Перед началом работы нам понадобится создать новый проект React. Вы можете использовать инструмент Create React App или любой другой способ создания проекта по вашему выбору. После создания проекта установите необходимые зависимости.Шаг 2: Создание компонента
Для демонстрации работы с локальным хранилищем создадим новый функциональный компонент с именемLocalStorageExample
.
В этом примере мы создаем счетчик с помощью хукаimport React, { useState } from 'react'; const LocalStorageExample = () => { const [count, setCount] = useState(0); // Функция для увеличения счетчика const incrementCount = () => { setCount(prevCount => prevCount + 1); }; // Функция для сохранения значения счетчика в локальном хранилище const saveCountToLocalStorage = () => { localStorage.setItem('count', count); }; // Функция для загрузки значения счетчика из локального хранилища const loadCountFromLocalStorage = () => { const savedCount = localStorage.getItem('count'); if (savedCount) { setCount(parseInt(savedCount)); } }; return ( <div> <p>Count: {count}</p> <button onClick={incrementCount}>Increment</button> <button onClick={saveCountToLocalStorage}>Save to localStorage</button> <button onClick={loadCountFromLocalStorage}>Load from localStorage</button> </div> ); }; export default LocalStorageExample;
useState
. При нажатии на кнопку Increment
значение счетчика увеличивается на 1
. Кнопка Save to localStorage
сохраняет текущее значение счетчика в локальное хранилище, а кнопка Load from localStorage
загружает значение счетчика из локального хранилища.
Шаг 3: Использование компонента
Теперь мы можем использовать наш компонентLocalStorageExample
в других компонентах или маршрутах приложения. Например, добавим его в главный компонент нашего приложения.
После запуска приложения вы увидите счетчик и кнопки для увеличения, сохранения и загрузки значения счетчика из локального хранилища.import React from 'react'; import LocalStorageExample from './LocalStorageExample'; const App = () => { return ( <div> <h1>My App</h1> <LocalStorageExample /> </div> ); }; export default App;