Многим приложениям в какой-то момент необходимо загрузить файлы CSV в базу данных. Этот пост расскажет вам, как загружать файлы CSV в MongoDB.
MongoDB — это документно-ориентированная база данных NoSQL, используемая для хранения больших объемов данных. Вместо использования таблиц и строк, как в традиционных реляционных базах данных, MongoDB использует коллекции и документы. Документы состоят из пар ключ-значение, которые являются основной единицей данных в MongoDB.
Сторона сервера
Мы будем использовать Express.js для серверной части.
Модули узла, которые мы собираемся использовать:
- body-parser: это промежуточное ПО для анализа тела Node.js.
- cors: используется для включения совместного использования ресурсов между источниками.
- csvtojson: это инструмент, предназначенный для преобразования данных csv в JSON с поддержкой настраиваемого парсера.
- dotenv: это модуль с нулевой зависимостью, который загружает переменные среды из файла .env в process.env.
- экспресс: это широко используемый фреймворк для node.
- mongoose: это инструмент объектного моделирования, предназначенный для работы в асинхронной среде.
- 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