Как загрузить csv/json файл для дальнейшей обработки на сервере (передать с фронта в бэк)

Question

Есть написанный функционал для загрузки CSV в ДБ на nodeJs. Пытаюсь понять, как прикрутить фронт, загружающий файл на сервер.

Есть два вопроса:

Целесообразно ли загружать csv на сервер в виде файла и потом обрабатывать его?
В сторону каких встроенных методов / библиотек смотреть для решения задачи? (Пользователь загружает csv -> данные файла передаются в целевую функцию или сам файл загружается на сервер)

На данный момент есть только написанный бэк, html с инпутом и кнопкой. Инфа, которую нагуглил приводит к путаннице (везде реализовано по разному и не совсем моя история)

Answer 1

Структура проекта:

Client-side (форма, поле для загрузки файла, кнопка для отправки формы):

<html lang="ru">

<head>
  <title>Hello world</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>
</head>

<body>

  <div class="container d-flex justify-content-center p-4 mt-3 border rounded">
    <form action="/csv-service" method="post" enctype="multipart/form-data" class="w-100">
      <h1>Загрузка файла</h1>

      <div class="form-group mt-3">
        <label for="textMessageTo">Текст:</label>
        <textarea class="form-control" id="textMessageTo" rows="3" name="text"></textarea>
      </div>
      <div class="mt-3 mb-3">
        <input class="form-control" type="file" id="formFile" name="csvfile" accept=".csv,.json,application/json">
      </div>

      <button type="submit" class="btn btn-primary mt-3">Отправить</button>
    </form>
  </div>


</body>

</html>

Server-side:

const path = require('path');
const express = require('express');
const multer = require('multer');

const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

const upload = multer({
  storage: multer.memoryStorage(),
});

app.use(express.static(path.join(__dirname, 'views')));

app.post(
  '/csv-service',
  upload.single('csvfile'),
  (req, res) => {
    console.log(req.body);
    console.log(req.file);
    res.status(204).json({});
  }
);

app.listen(3000, () => {
  console.log('Server has been started at port 3000...');
});

Результат загрузки файла на серверной стороне будет выглядет так:

{ text: 'rerer' }
{
  fieldname: 'csvfile',
  originalname: 'example.csv',
  encoding: '7bit',
  mimetype: 'text/csv',
  buffer: <Buffer 22 30 30 30 30 30 30 30 31 32 30 36 30 30 39 31 34 33 33 35 38 22 3b 22 33 30 30 2e 30 30 22 3b 22 d0 9f d0 b0 d1 80 d1 82 d0 b5 d1 80 2c 20 d1 80 d1 ... 2563 more bytes>,
  size: 2613
}

Так что вам остаётся взять req.file.buffer и отправить его вашему сервису. Если ваш сервис не умеет работать с буфером, тогда загляните по этой ссылке.

Использованные библиотеки:

express, чтобы за 2 минуты создать бэкенд.
multer, чтобы обработать загрузку файла. В качестве storage использован MemoryStorage, чтобы не сохранять файл на диск.

БЛОГ НА HUSL

Как загрузить csv/json файл для дальнейшей обработки на сервере (передать с фронта в бэк)

Ответы (1 шт):

Структура проекта:

Client-side (форма, поле для загрузки файла, кнопка для отправки формы):

Server-side: