Введение
Загрузка файлов является фундаментальным аспектом многих веб-приложений. Как разработчик Node.js, вы часто будете сталкиваться со сценариями, когда пользователям необходимо одновременно загружать несколько файлов. К счастью, у нас есть мощное промежуточное ПО под названием multer, которое упрощает процесс загрузки файлов в Node.js. В этом всеобъемлющем руководстве мы рассмотрим все тонкости использования multer для обработки загрузки одного и нескольких файлов как из одного, так и из нескольких полей.
Предпосылки
Прежде чем мы углубимся в реализацию, убедитесь, что в вашей системе установлено следующее:
1. Node.js и npm — Загрузите и установите Node.js с официального сайта (https://nodejs.org).
2. Текстовый редактор. Мы рекомендуем использовать Visual Studio Code или любой другой редактор по вашему выбору.
Настройка проекта
Начнем с создания нового проекта Node.js и установки необходимых зависимостей.
Шаг 1: Создайте новый каталог и перейдите в него:
mkdir multer-file-upload-tutorial cd multer-file-upload-tutorial
Шаг 2. Инициализируйте новый проект Node.js:
npm init -y
Шаг 3: Установите необходимые пакеты, а именно `express` и `multer`:
npm install express multer
Создание экспресс-приложения
Теперь давайте создадим приложение Express и настроим multer для обработки загрузки файлов.
Шаг 4: Создайте новый файл с именем app.js в корне проекта:
// app.js
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000; // Change this port to your preferred port number
// Create a storage strategy for multer
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// Specify the upload directory
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
// Define the file name format
cb(null, file.originalname);
}
});
// Create a multer instance with the storage strategy
const upload = multer({ storage: storage });
// Route to handle single file upload
app.post('/uploadSingle', upload.single('singleFile'), (req, res) => {
// The uploaded file is available in req.file
res.json({ message: 'Single file uploaded successfully!' });
});
// Route to handle multiple file uploads from a single field
app.post('/uploadMultipleSingleField', upload.array('multipleFiles', 5), (req, res) => {
// The uploaded files are available in req.files
res.json({ message: 'Multiple files from a single field uploaded successfully!' });
});
// Route to handle multiple file uploads from multiple fields
app.post('/uploadMultipleFields', upload.fields([
{ name: 'field1Files', maxCount: 5 },
{ name: 'field2Files', maxCount: 5 }
]), (req, res) => {
// The uploaded files are available in req.files
// Use req.files['field1Files'] for files from the first field
// Use req.files['field2Files'] for files from the second field
res.json({ message: 'Multiple files from multiple fields uploaded successfully!' });
});
// Start the server
app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});
В приведенном выше коде мы импортируем необходимые модули, создаем приложение Express и настраиваем multer для обработки загрузки файлов. Мы настраиваем стратегию хранения на диске, определяя место назначения и формат имени загружаемых файлов. В этом примере мы сохраним файлы в каталоге «uploads/» с их исходными именами.
Обработка загрузки файлов
Настроив наш сервер, давайте создадим HTML-форму, чтобы протестировать функциональность загрузки файлов.
Шаг 5. Создайте файл HTML с именем index.html в корне проекта:
<! - index.html → <!DOCTYPE html> <html> <head> <title>File Upload Test</title> </head> <body> <h1>File Upload Test</h1> <! - Single File Upload → <h2>Single File Upload</h2> <form action="http://localhost:3000/uploadSingle" method="post" enctype="multipart/form-data"> <input type="file" name="singleFile"> <br> <input type="submit" value="Upload"> </form> <! - Multiple File Uploads from a Single Field → <h2>Multiple File Uploads from a Single Field</h2> <form action="http://localhost:3000/uploadMultipleSingleField" method="post" enctype="multipart/form-data"> <input type="file" name="multipleFiles" multiple> <br> <input type="submit" value="Upload"> </form> <! - Multiple File Uploads from Multiple Fields → <h2>Multiple File Uploads from Multiple Fields</h2> <form action="http://localhost:3000/uploadMultipleFields" method="post" enctype="multipart/form-data"> <h3>Field 1</h3> <input type="file" name="field1Files" multiple> <br> <h3>Field 2</h3> <input type="file" name="field2Files" multiple> <br> <input type="submit" value="Upload"> </form> </body> </html>
Проверка загрузки файла
Шаг 6: Создайте новый каталог с именем uploads в корне проекта. Здесь будут храниться загруженные файлы.
Шаг 7: Запустите экспресс-сервер:
node app.js
Теперь ваш сервер работает по адресу http://localhost:3000 (или указанному вами порту).
Шаг 8. Откройте файл index.html в своем браузере. Вы должны увидеть форму с параметрами для тестирования загрузки одного или нескольких файлов как из одного поля, так и из нескольких полей.
Заключение
Вы успешно освоили загрузку файлов в Node.js с помощью multer. Теперь у вас есть знания и примеры кода для беспроблемной обработки загрузки одного или нескольких файлов. multer упрощает процесс управления загруженными файлами и обеспечивает гибкость при обработке различных сценариев загрузки файлов.
Не стесняйтесь исследовать дополнительные функции multer, такие как установка ограничений на размер файлов, фильтрация файлов по типам и настройка стратегий хранения. Эти знания помогут вам создать надежные и эффективные функции загрузки файлов в приложениях Node.js.
Удачного кодирования!
