Существует три основных способа обработки загрузки файлов в Node.js: сохранение изображений непосредственно на ваш сервер, сохранение изображений двоичные данные или строковые данные base64 в вашу базу данных, а также использование сегментов Amazon Web Service (AWS) S3 для сохранения и управления изображений.

Здесь вы узнаете, как использовать Multer, промежуточное ПО Node.js, для загрузки и сохранения изображений непосредственно на ваш сервер в приложениях Node.js за несколько шагов.

Шаг 1: Настройка среды разработки

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT.

Сначала создайте папку проекта и перейдите в нее, выполнив следующую команду:

mkdir мульти-учебник
CD мультитуториал

Затем инициализируйте npm в каталоге вашего проекта, выполнив:

инициализация npm -y

Далее вам нужно будет установить некоторые зависимости. Зависимости, необходимые для этого руководства, включают:

  • Выражать: Express — это фреймворк Node.js. который обеспечивает надежный набор функций для веб-приложений и мобильных приложений. Это упрощает создание серверных приложений с помощью Node.js.
    instagram viewer
  • Мультер: Multer — это промежуточное ПО, упрощающее загрузку и сохранение изображений на ваш сервер.

Установите пакеты с менеджер пакетов узла запустив:

нпм установить экспресс мультер

Далее создайте app.js файл в корневом каталоге вашего проекта и добавьте приведенный ниже блок кода, чтобы создать базовый сервер Express:

//app.js
константа экспресс = требовать('выражать');
константа приложение = экспресс();
константа порт = процесс.env. ПОРТ || 3000;
app.listen (порт, () =>{
консоль.бревно(`Приложение прослушивает порт ${порт}`);
});

Шаг 2: Настройка Мультера

Во-первых, импорт множитель в вашей app.js файл.

константа мультер = требовать("мульт");

множитель требуется механизм хранения, который содержит информацию о каталоге, в котором будут храниться загруженные файлы, и о том, как эти файлы будут называться.

А множитель Механизм хранения создается путем вызова дискХранилище метод на импортном множитель модуль. Этот метод возвращает StorageEngine реализация, настроенная для хранения файлов в локальной файловой системе.

Он принимает объект конфигурации с двумя свойствами: место назначения, представляющий собой строку или функцию, указывающую, где будут храниться загруженные изображения.

Второе свойство, имя файла, — это функция, определяющая имена загружаемых файлов. Он принимает три параметра: запрос, файли обратный вызов (КБ). запрос экспресс Запрос объект, файл объект, содержащий информацию об обрабатываемом файле, и КБ это обратный вызов, который определяет имена загруженных файлов. Функция обратного вызова принимает ошибку и имя файла в качестве аргументов.

Добавьте приведенный ниже блок кода в свой app.js файл для создания механизма хранения:

//Настройка механизма хранения
константа storageEngine = multer.diskStorage({
 место назначения: "./изображений",
 имя файла: (req, файл, cb) => {
 КБ(нулевой, `${Дата.сейчас()}--${file.originalname}`);
 },
});

В приведенном выше блоке кода вы устанавливаете место назначения собственность на ”./изображений», таким образом, изображения будут храниться в каталоге вашего проекта в изображений папка. Затем в обратном вызове вы передали нулевой в качестве ошибки и строку шаблона в качестве имени файла. Строка шаблона состоит из метки времени, сгенерированной вызовом Дата.сейчас() чтобы имена изображений всегда были уникальными, два дефиса для разделения имени файла и метки времени, а также исходное имя файла, к которому можно получить доступ из файл объект.

Результирующие строки из этого шаблона будут выглядеть так: 1663080276614--example.jpg.

Далее необходимо инициализировать множитель с механизмом хранения.

Добавьте приведенный ниже блок кода в свой app.js файл для инициализации multer с механизмом хранения:

//инициализация мультера
константа загрузить = мультипликатор({
 хранилище: storageEngine,
});

множитель возвращает экземпляр Multer, предоставляющий несколько методов для создания промежуточного программного обеспечения, которое обрабатывает файлы, загруженные в multipart/form-data формат.

В приведенном выше блоке кода вы передаете объект конфигурации с хранилище свойство установлено на хранилищеДвигатель, который является механизмом хранения, который вы создали ранее.

В настоящее время ваша конфигурация Multer завершена, но нет правил проверки, которые гарантируют, что на вашем сервере могут быть сохранены только изображения.

Шаг 3: Добавление правил проверки изображения

Первое правило проверки, которое вы можете добавить, — это максимальный размер, разрешенный для загрузки изображения в ваше приложение.

Обновите объект конфигурации multer с помощью приведенного ниже блока кода:

константа загрузить = мультипликатор({
 хранилище: storageEngine,
пределы: { размер файла: 1000000 },
});

В приведенном выше блоке кода вы добавили пределы свойство объекта конфигурации. Это свойство представляет собой объект, определяющий различные ограничения на входящие данные. Вы устанавливаете размер файла свойство, с помощью которого устанавливается максимальный размер файла в байтах 1000000, что эквивалентно 1 МБ.

Еще одно правило проверки, которое вы можете добавить, это файлФильтр свойство, необязательная функция для управления загружаемыми файлами. Эта функция вызывается для каждого обрабатываемого файла. Эта функция принимает те же параметры, что и имя файла функция: запрос, файл, и КБ.

Чтобы сделать ваш код чище и более пригодным для повторного использования, вы абстрагируете всю логику фильтрации в функцию.

Добавьте приведенный ниже блок кода в свой app.js файл для реализации логики фильтрации файлов:

константа путь = требовать("путь");
константа проверить ТипФайла = функция (файл, КБ) {
//Разрешенные расширения файлов
константа типы файлов = /jpeg|jpg|png|gif|svg/;
 //проверять расширение имена
константа extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
константа mimeType = fileTypes.test (file.mimetype);
 если (MIMEType && доб.имя) {
возвращаться КБ(нулевой, истинный);
 } еще {
 КБ("Ошибка: Вы можете загружать только изображения!!");
 }
};

checkFileType функция принимает два параметра: файл и КБ.

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

тест метод проверяет совпадение в переданной строке и возвращает истинный или ЛОЖЬ в зависимости от того, найдет ли он совпадение. Затем вы передаете имя загруженного файла, к которому вы можете получить доступ через file.originalname, в модуль пути добавочное имя метод, который возвращает расширение строкового пути к нему. Наконец, вы связываете JavaScript в нижнем регистре строковую функцию к выражению для обработки изображений с их именами расширений в верхнем регистре.

Одной проверки имени расширения недостаточно, так как имена расширений можно легко редактировать. Чтобы убедиться, что загружаются только изображения, необходимо установить флажок MIME-тип слишком. Вы можете получить доступ к файлу мимтип собственности через файл.mimetype. Итак, вы проверяете мимтип собственность с помощью тест как и для имен расширений.

Если два условия возвращают значение true, вы возвращаете обратный вызов с нулевой и true, или вы возвращаете обратный вызов с ошибкой.

Наконец, вы добавляете файлФильтр к вашей конфигурации multer.

константа загрузить = мультипликатор({
 хранилище: storageEngine,
пределы: { размер файла: 10000000 },
 fileFilter: (req, file, cb) => {
 checkFileType (файл, cb);
 },
});

Шаг 4: Использование Multer в качестве промежуточного ПО Express

Затем вам нужно реализовать обработчики маршрутов, которые будут обрабатывать загрузку изображений.

Multer может обрабатывать как одиночные, так и множественные загрузки изображений в зависимости от конфигурации.

Добавьте приведенный ниже блок кода в свой app.js файл для создания обработчика маршрута для загрузки одного изображения:

приложение.пост("/single", загрузить.сингл("изображение"), (рек, рез) => {
если (запрос.файл) {
 рес.отправить("Один файл успешно загружен");
 } еще {
 рез.статус (400).отправить("Пожалуйста, загрузите действительное изображение");
 }
});

В приведенном выше блоке кода вы вызвали одинокий метод на загрузить переменная, в которой хранится ваша конфигурация мультера. Этот метод возвращает промежуточное ПО, которое обрабатывает «один файл», связанный с данным полем формы. Затем вы прошли изображение как поле формы.

Наконец, проверьте, был ли файл загружен через запрос объект в файл свойство. Если это так, вы отправляете сообщение об успехе, иначе вы отправляете сообщение об ошибке.

Добавьте приведенный ниже блок кода в свой app.js файл для создания обработчика маршрута для загрузки нескольких изображений:

приложение.пост("/multiple", загрузить.массив("изображений", 5), (треб., реш.) => {
если (запрос.файлы) {
 рес.отправить("Несколько файлов успешно загружены");
 } еще {
 рез.статус (400).отправить("Пожалуйста, загрузите допустимые изображения");
 }
});

В приведенном выше блоке кода вы вызвали множество метод на загрузить переменная, в которой хранится ваша конфигурация мультера. Этот метод принимает два аргумента — имя поля и максимальное количество — и возвращает ПО промежуточного слоя, которое обрабатывает несколько файлов с одинаковым именем поля. Затем вы прошли изображений в качестве общего поля формы и 5 в качестве максимального количества изображений, которые можно загрузить одновременно.

Преимущества использования Мультера

Использование Multer в ваших приложениях Node.js упрощает сложный процесс загрузки и сохранения изображений непосредственно на вашем сервере. Multer также основан на busboy, модуле Node.js для анализа входящих данных формы, что делает его очень эффективным для анализа данных формы.