Как загружать файлы в React с помощью NodeJS и 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. Теперь добавьте следующий код.

// 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;

В приведенном выше коде мы использовали хуки react для управления состоянием, и у нас есть две функции: 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.

// App.js

import React from 'react';
import FileUpload from './fileupload';
import './App.css';

function App() {
  return (
    <div className="App">
      <FileUpload />
    </div >
  );
}

export default App;

Запустите приложение React, запустив npm start.

Веб-приложения, созданные на базе 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;

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

Итоги

Работа с локальным хранилищем (localStorage) в React для функциональных компонентов довольно проста. В этой статье мы рассмотрели основы работы с локальным хранилищем, а также создали пример компонента, который сохраняет и загружает данные из локального хранилища. Обратите внимание, что локальное хранилище имеет некоторые ограничения, такие как максимальный размер данных и доступность только для текущего домена. Поэтому перед использованием локального хранилища важно учитывать эти ограничения и проверять его доступность в браузере пользователя.