ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Как загружать файлы в React с помощью NodeJS и Express
год назад·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
.Что за хук useId в React?
год назад·1 мин. на чтение
useId - хук, который появился в React 18. Он помогает при работе с уникальными идентификаторами в компонентах.
Как работает хук useId
?
Основным вариантом использования useId
является создание уникальных идентификаторов для использования в элементах HTML. Лучшим примером этого может быть создание идентификатора для input и label, которые указывают на тот же идентификатор. Например, если у вас есть компонент EmailForm
, вы можете написать его так.
function EmailForm() { return ( <> <label htmlFor="email">Email</label> <input id="email" type="email" /> </> ) }
email
. Это, очевидно, плохо, поскольку каждый идентификатор на странице должен быть уникальным, и, кроме того, ваши label при нажатии теперь будут фокусироваться на первом инпуте с email
на странице, а не на инпуте электронной почты, связанном с этим label. Чтобы исправить это, мы можем использовать useId
.
Хукfunction EmailForm() { const id = useId() return ( <> <label htmlFor={id}>Email</label> <input id={id} type="email" /> </> ) }
useId
— это простой хук, который не принимает входных данных и возвращает уникальный идентификатор. Этот идентификатор уникален для каждого отдельного компонента, что означает, что мы можем отображать эту форму на нашей странице столько раз, сколько захотим, не беспокоясь о повторяющихся идентификаторах.
Идентификаторы, сгенерированные useId
, будут выглядеть примерно так: :r1:
, :r2:
и т.д.
Получение элементов с querySelector
Одна вещь, которую следует отметить в отношении хука useId
, заключается в том, что идентификаторы, созданные им, являются недопустимыми селекторами для использования с методом querySelector
. Это сделано намеренно, поскольку React не хочет, чтобы вы выбирали элементы по их идентификатору, используя что-то вроде querySelector
. Вместо этого вы должны использовать для этого хук useRef
. Если вы не знакомы с хуком useRef
, вам следует ознакомиться с руководством по хуку useRef
.
Использование нескольких идентификаторов в одном компоненте
Одна важная вещь, которую следует отметить в отношении этого хука, заключается в том, что вы должны использовать его только один раз для каждого компонента. Это поможет с производительностью и по-прежнему даст вам преимущества, которые вы хотите получить от хука.Как вы можете видеть в приведенном выше примере, мы использовалиfunction LogInForm() { const id = useId() return ( <> <div> <label htmlFor={`${id}-email`}>Email</label> <input id={`${id}-email`} type="email" /> </div> <div> <label htmlFor={`${id}-password`}>Password</label> <input id={`${id}-password`} type="password" /> </div> </> ) }
useId
один раз в компоненте и просто добавили уникальный идентификатор в конец идентификатора, сгенерированного useId
. Это по-прежнему дает нам уникальные идентификаторы для всех элементов на нашей странице, но избавляет нас от накладных расходов на производительность, связанных с многократным вызовом этого хука в компоненте с несколькими идентификаторами.
Рендеринг на стороне сервера
Еще одна важная причина использовать этот хук — помочь с рендерингом на стороне сервера. Если вы используете что-то вродеMath.random()
или другой генератор случайных чисел для генерации идентификаторов, вы столкнетесь с проблемой, когда ваши идентификаторы для одного и того же компонента на сервере отличаются от идентификаторов для этих компонентов на клиенте. Это становится особенно проблематичным, когда в вашем приложении есть сочетание клиентского и серверного отображаемого кода, поскольку теперь вы больше не можете доверять идентификаторам, сгенерированным вашим кодом.
Хук useId
исправляет все это, поскольку сгенерированные им идентификаторы не являются случайными. Это означает, что идентификатор будет совпадать между сервером и клиентом, и независимо от того, какое сочетание клиент-серверный код у вас есть, вы можете быть уверены, что ваши идентификаторы верны. Это самая большая причина для использования этого хука, поскольку он значительно упрощает работу с серверным кодом.
Итоги
Легко упустить из виду хукuseId
в React 18 из-за всех других удивительных функций/хуков, выпущенных вместе с ним, но этот маленький хук невероятно полезен.