Многим приложениям в какой-то момент необходимо загрузить файлы CSV в базу данных. Этот пост расскажет вам, как загружать файлы CSV в MongoDB.

MongoDB — это документно-ориентированная база данных NoSQL, используемая для хранения больших объемов данных. Вместо использования таблиц и строк, как в традиционных реляционных базах данных, MongoDB использует коллекции и документы. Документы состоят из пар ключ-значение, которые являются основной единицей данных в MongoDB.

Сторона сервера

Мы будем использовать Express.js для серверной части.

Модули узла, которые мы собираемся использовать:

  1. body-parser: это промежуточное ПО для анализа тела Node.js.
  2. cors: используется для включения совместного использования ресурсов между источниками.
  3. csvtojson: это инструмент, предназначенный для преобразования данных csv в JSON с поддержкой настраиваемого парсера.
  4. dotenv: это модуль с нулевой зависимостью, который загружает переменные среды из файла .env в process.env.
  5. экспресс: это широко используемый фреймворк для node.
  6. mongoose: это инструмент объектного моделирования, предназначенный для работы в асинхронной среде.
  7. multer: это промежуточное ПО node.js для обработки multipart/form-data, которое в основном используется для загрузки файлов.

пакет.json

{
  "name": "csv-upload-tutorial-medium",
  "version": "1.0.0",
  "description": "Trying to upload csv files to MongoDB",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hr",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "csvtojson": "^2.0.10",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "mongoose": "^6.4.5",
    "multer": "^1.4.5-lts.1"
  }
}

Теперь нам нужно создать схему для данных CSV, которые будут храниться в MongoDB.

модель.js

var mongoose = require('mongoose');
var dumbledoresArmySchema = new mongoose.Schema({
    firstName: String,
    lastName: String,
    house: String
});
module.exports = new mongoose.model('DumbledoresArmy', dumbledoresArmySchema);

Для подключения к MongoDB нам нужна ссылка на кластер MongoDB, которую следует поместить в файл .env, как показано ниже:

.env

MONGO_URL=your_url_here

Теперь мы создадим файл index.js, чтобы создать маршруты API и завершить API:

index.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
const cors = require('cors');
var mongoose = require('mongoose');
var multer = require('multer');
var csv = require('csvtojson');
require('dotenv/config');
var upload = multer({ dest: 'uploads/' });
var dumbledoresArmyModel = require('./model');
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/', (req, res) => {
    dumbledoresArmyModel.find({}, (err, items) => {
        if (err) {
            console.log(err);
        }
        else {
            res.json({ items: items });
        }
    });
});
app.post('/', upload.single('file'), (req, res, next) => {
    csv()
    .fromFile(req.file.path)
    .then((jsonObj)=>{
        var army = [];
        for(var i = 0;i<jsonObj.length;i++){
            var obj={};
            obj.firstName=jsonObj[i]['First Name'];
            obj.lastName=jsonObj[i]['Last Name'];
            obj.house=jsonObj[i]['House'];
            army.push(obj);
        }
        dumbledoresArmyModel.insertMany(army).then(function(){
            res.status(200).send({
                message: "Successfully Uploaded!"
            });
        }).catch(function(error){
            res.status(500).send({
                message: "failure",
                error
            });
        });
    }).catch((error) => {
        res.status(500).send({
            message: "failure",
            error
        });
    })
});
mongoose.connect(process.env.MONGO_URL,
{ useNewUrlParser: true, useUnifiedTopology: true }, err => {
    console.log('Connected to database!')
});
app.listen('3000' || process.env.PORT, err => {
    if (err)
        throw err
    console.log('Server started!')
});

Теперь создайте пустую папку с именем uploads в том же каталоге. multer будет использовать эту папку для размещения загруженных файлов.

Теперь часть API завершена, вы можете протестировать этот API с помощью Postman или других сервисов.

Сторона клиента

Нам нужно создать файл index.html, чтобы обеспечить структуру нашего приложения.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSV Upload Test</title>
    <style>
      table, th, td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <br>
    <center>
      <div class="container">
        <form id="upload_form" enctype="multipart/form-data" name="file">
          <div>
            <label>Select file to upload</label>
            <input type="file" id="fileinput">
          </div>
          <br>
          <button type="submit">Upload</button>
        </form>
      </div>
    </center>
    <hr>
    <center>
      <h2>Dumbledore's Army:</h2>
      <table id="table" class="table">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>House</th>
          </tr>
        </thead>
        <tbody id="tbody"></tbody>
      </table>
    </center>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

В качестве последнего шага нам нужно создать файл javascript для получения созданного нами API.

app.js

window.onload = function(e){
  var tbody=document.getElementById('tbody');
  fetch(`http://localhost:3000`)
  .then(res => res.json())
  .then(data =>{
    console.log(data);
    for(let i=0;i<data.items.length;i++){
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var txt1 = document.createTextNode(data.items[i]['firstName']);
      td1.appendChild(txt1);
      var td2=document.createElement("td");
      var txt2=document.createTextNode(data.items[i]['lastName']);
      td2.appendChild(txt2);
      var td3=document.createElement("td");
      var txt3=document.createTextNode(data.items[i]['house']);
      td3.appendChild(txt3);
      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tbody.appendChild(tr);
    }
  }).catch((e)=>console.log(e))
}
const addCSV=(e)=>{
  e.preventDefault();
  const input = document.getElementById('fileinput');
  console.log(input.files[0]);
  var formData = new FormData()
  formData.append('file', input.files[0]);
  fetch('http://localhost:3000', {
    method: 'POST',
    body: formData
  }).then(res => res.json())
  .then(data => {
    alert("CSV uploaded successfully");
    window.location.reload();
  })
  .catch((e)=>console.log(e))
}
document.getElementById('upload_form').addEventListener('submit',addCSV)

Теперь, после того как вы сохраните файлы index.html и app.js в одном каталоге, вы можете запустить файл index.html и использовать его для загрузки CSV-файлов в MongoDB.

Окончательное приложение:

Для получения полного рабочего кода вы можете обратиться к ссылке на репозиторий GitHub, указанной ниже: https://github.com/sahni-hargun/csv-upload-tutorial-medium

Если вам понравилась эта статья, пожалуйста, хлопните в ладоши!!

Если у вас есть какие-либо вопросы, вы можете задать их в любое время в комментариях ниже!

Вы можете следить за мной на GitHub: @sahni-hargun