Node.js - Загрузка файлов: Путеводитель для начинающих

Привет, будущий суперзвезда кодирования! Добро пожаловать в наше захватывающее путешествие в мир загрузки файлов с использованием Node.js. Как ваш доброжелательный соседский компьютерный учитель, я рад помочь вам в этом приключении. Не волнуйтесь, если вы никогда раньше не писали ни строчки кода – мы начнем с азов и будем постепенно продвигаться вперед. К концу этого руководства вы будете загружать файлы, как профессионал!

Введение в загрузку файлов в Node.js

Прежде чем мы углубимся в детали, давайте поговорим о важности загрузки файлов. Представьте, что вы создаете социальное приложение, где пользователи могут делиться фотографиями. Или, может быть, вы разрабатываете систему управления документами для компании. В обоих случаях вам нужно提供一个 средство для отправки файлов на ваш сервер. Вот где и появляется загрузка файлов!

Node.js, наш надежный JavaScript-рантайм, предлагает несколько способов обработки загрузки файлов. Сегодня мы сосредоточимся на двух популярных библиотеках: Formidable и Multer. Представьте их как ваших супергероев для загрузки файлов, у каждого из которых есть свои особые способности!

Formidable: Ваш первый помощник для загрузки файлов

Что такое Formidable?

Formidable – это как надежный друг, который всегда готов помочь вам. Это модуль для Node.js, который делает анализ данных формы, особенно загрузку файлов, очень простым. Давайте посмотрим, как им пользоваться!

Настройка Formidable

Сначала нам нужно установить Formidable. Откройте ваш терминал и введите:

npm install formidable

Эта команда похожа на поход в магазин супергероев и покупку костюма Formidable. Теперь вы готовы начать загрузку!

Основная загрузка файла с использованием Formidable

Давайте создадим простой сервер, который может обрабатывать загрузку файлов. Вот код:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('Файл загружен и перемещен!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Давайте разберем это:

1. Мы создаем сервер с помощью http.createServer().
2. Если URL равен '/fileupload', мы используем Formidable для анализа входящей формы.
3. Мы перемещаем загруженный файл из временного местоположения в постоянное.
4. Если URL другой, мы отображаем простую форму загрузки.

Обработка загрузки нескольких файлов

Что, если вы хотите загрузить несколько файлов одновременно? Нет проблем! Вот как можно изменить код:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('Файлы загружены и перемещены!');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Основные изменения здесь:

1. Мы устанавливаем form.multiples = true для允许多文件上传。
2. Мы проверяем, является ли files.filetoupload массивом (множественные файлы) или объектом (один файл).
3. Мы используем forEach для обработки множественных файлов, если необходимо.

Multer: Новичок в округе

Введение в Multer

Теперь познакомимся с нашим вторым супергероем для загрузки файлов: Multer. Multer – это как младший, mais cooler, брат Formidable. Он разработан специально для обработки multipart/form-data, что идеально подходит для загрузки файлов.

Настройка Multer

Чтобы начать работу с Multer, установите его с помощью npm:

npm install multer

Основная загрузка файла с использованием Multer

Вот простой пример использования Multer:

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

const app = express();

const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});

const upload = multer({ storage: storage });

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('Пожалуйста, загрузите файл');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('Сервер запущен на порту 3000'));

Давайте разберем это:

1. Мы настраиваем хранилище, которое tells Multer, где хранить файлы и как их называть.
2. Мы создаем экземпляр загрузки с использованием наших настроек хранилища.
3. Мы определяем route для формы загрузки и другой для обработки загрузки файла.
4. В route загрузки мы используем upload.single('filetoupload') для обработки загрузки одного файла.

Обработка загрузки нескольких файлов с использованием Multer

Multer делает очень простым обработку загрузки множественных файлов. Вот как:

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('Пожалуйста, выберите файлы');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

Основное изменение здесь – использование upload.array('filetoupload', 12) вместо upload.single(). '12' указывает максимальное количество файлов.

Сравнение Formidable и Multer

Теперь, когда мы видели как Formidable, так и Multer в действии, давайте сравним их:

Функция	Formidable	Multer
Легкость использования	Прост и понятен	Требует больше настройки, но предлагает больше контроля
Интеграция	Работает с любым Node.js сервером	Разработан для работы с Express
Обработка файлов	Может обрабатывать как файлы, так и поля	Специализирован для загрузки файлов
Настройка	Меньше гибкости	Высокая гибкость
Загрузка множественных файлов	Требует дополнительного кода	Встроенная поддержка

Заключение

Поздравления! Вы только что повысили свои навыки Node.js, научившись обрабатывать загрузку файлов. Независимо от того, выберете ли вы Formidable за его простоту или Multer за его мощность и гибкость, вы теперь equipped для добавления функции загрузки файлов в свои приложения на Node.js.

Не забывайте, что практика делает мастера. Попробуйте создать небольшой проект, который использует загрузку файлов – может быть, простое приложение для обмена изображениями или система хранения документов. Чем больше вы кодите, тем комфортнее вы будете чувствовать себя с этими концепциями.

Счастливого кодирования, и пусть ваши загрузки всегда будут успешными!

Credits: Image by storyset