Има три основни начина за обработка на качвания на файлове в Node.js: запазване на изображенията директно на вашия сървър, запазване на изображенията двоични данни или base64 низови данни към вашата база данни и използване на Amazon Web Service (AWS) S3 кофи за запазване и управление на вашите изображения.
Тук ще научите как да използвате Multer, междинен софтуер на Node.js, за да качвате и запазвате изображения директно на вашия сървър в приложения на Node.js в няколко стъпки.
Стъпка 1: Настройване на среда за разработка
Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT.
Първо създайте папка на проекта и се преместете в нея, като изпълните следната команда:
mkdir мулти-урок
cd мулти-урок
След това инициализирайте npm в директорията на вашия проект, като изпълните:
npm init -y
След това ще трябва да инсталирате някои зависимости. Зависимостите, необходими за този урок, включват:
- Експрес: Express е Node.js рамка който предоставя стабилен набор от функции за уеб и мобилни приложения. Това улеснява изграждането на бекенд приложения с Node.js.
- Мълтър: Multer е експресен междинен софтуер, който опростява качването и запазването на изображения на вашия сървър.
Инсталирайте пакетите с мениджърът на пакети на възли като тичам:
npm Инсталирай експресен multer
След това създайте app.js файл в главната директория на вашия проект и добавете кодовия блок по-долу, за да създадете основен Express сървър:
//app.js
конст експрес = изискват('експресно');
конст приложение = експрес();
конст порт = process.env. ПРИСТАНИЩЕ || 3000;
app.listen (порт, ()=>{
конзола.log(„Приложението слуша порт ${порт}`);
});
Стъпка 2: Конфигуриране на Multer
Първо, импортирайте multer във вашия app.js файл.
конст multer = изискват("multer");
multer изисква механизъм за съхранение, който съдържа информация за директорията, където ще се съхраняват качените файлове и как ще бъдат именувани файловете.
А multer машината за съхранение се създава чрез извикване на diskStorage метод върху внесените multer модул. Този метод връща a StorageEngine изпълнение, конфигурирано да съхранява файлове в локалната файлова система.
Взема конфигурационен обект с две свойства: дестинация, което е низ или функция, която указва къде ще се съхраняват качените изображения.
Второто свойство, име на файл, е функция, която определя имената на качените файлове. Отнема три параметъра: изискване, файли обратно извикване (cb). изискване е Експресът Заявка обект, файл е обект, съдържащ информация за обработения файл и cb е обратно извикване, което определя имената на качените файлове. Функцията за обратно извикване приема грешка и име на файл като аргументи.
Добавете кодовия блок по-долу към вашия app.js файл за създаване на машина за съхранение:
//Настройване на машина за съхранение
конст storageEngine = multer.diskStorage({
дестинация: "./изображения",
име на файл: (req, файл, cb) => {
cb(нула, `${Дата.сега()}--${file.originalnoname}`);
},
});
В кодовия блок по-горе задавате дестинация собственост на ”./изображения”, по този начин изображенията ще се съхраняват в директорията на вашия проект в an изображения папка. След това, при обратното извикване, вие преминахте нула като грешка и шаблонен низ като име на файл. Шаблонният низ се състои от клеймо за време, генерирано от извикване Date.now() за да се гарантира, че имената на изображенията винаги са уникални, две тирета за разделяне на името на файла и клеймото за време и оригиналното име на файла, което може да бъде достъпно от файл обект.
Получените низове от този шаблон ще изглеждат така: 1663080276614--example.jpg.
След това трябва да инициализирате multer с двигателя за съхранение.
Добавете кодовия блок по-долу към вашия app.js файл за инициализиране на multer с машината за съхранение:
//инициализиране на multer
конст качване = multer({
съхранение: storageEngine,
});
multer връща екземпляр на Multer, който предоставя няколко метода за генериране на междинен софтуер, който обработва файлове, качени в multipart/form-data формат.
В кодовия блок по-горе предавате конфигурационен обект с a съхранение свойство, зададено на storageEngine, което е машината за съхранение, която създадохте по-рано.
Понастоящем вашата конфигурация на Multer е завършена, но няма правила за валидиране, които гарантират, че само изображения могат да бъдат запазени на вашия сървър.
Стъпка 3: Добавяне на правила за валидиране на изображения
Първото правило за проверка, което можете да добавите, е максималният разрешен размер за изображение, което да бъде качено във вашето приложение.
Актуализирайте своя обект за конфигурация на мултимедия с кодовия блок по-долу:
конст качване = multer({
съхранение: storageEngine,
граници: { размер на файла: 1000000 },
});
В кодовия блок по-горе добавихте a граници свойство към конфигурационния обект. Това свойство е обект, който определя различни ограничения за входящи данни. Вие задавате размер на файла свойство, с което се задава максималния размер на файла в байтове 1000000, което е еквивалентно на 1MB.
Друго правило за валидиране, което можете да добавите, е fileFilter свойство, незадължителна функция за контрол кои файлове се качват. Тази функция се извиква за всеки файл, който се обработва. Тази функция приема същите параметри като име на файл функция: изискване, файл, и cb.
За да направите кода си по-чист и по-използваем, ще абстрахирате цялата логика на филтриране във функция.
Добавете кодовия блок по-долу към вашия app.js файл за прилагане на логиката за филтриране на файлове:
конст път = изискват("път");
конст checkFileType = функция (файл, cb) {
//Разрешени файлови разширения
конст типове файлове = /jpeg|jpg|png|gif|svg/;
//проверка разширение имена
конст extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
конст mimeType = fileTypes.test (file.mimetype);
ако (mimeType && extName) {
връщане cb(нула, вярно);
} друго {
cb("Грешка: Можете да качвате само изображения!!");
}
};
The checkFileType функцията приема два параметъра: файл и cb.
В кодовия блок по-горе дефинирахте a файлови типове променлива, която съхранява регулярен израз с разрешените разширения на файла с изображение. След това се обадихте на тест метод на регулярния израз.
The тест методът проверява за съвпадение в предадения низ и връща вярно или невярно в зависимост от това дали намира съвпадение. След това предавате името на качения файл, през който можете да получите достъп file.originalname, в модула на пътя външно име метод, който връща разширението на пътя на низа към него. Накрая вие свързвате JavaScript toLowerCase функция за низ към израза за обработка на изображения с техните имена на разширения в главни букви.
Само проверката на името на разширението не е достатъчна, тъй като имената на разширенията могат лесно да се редактират. За да сте сигурни, че се качват само изображения, трябва да проверите Тип MIME също. Можете да получите достъп до файл mimetype собственост чрез file.mimetype. Така че проверявате за mimetype собственост, използваща тест метод, както направихте за имената на разширенията.
Ако двете условия върнат true, вие връщате обратното извикване с нула и true, или връщате обратното извикване с грешка.
Накрая добавяте fileFilter собственост към вашата конфигурация на мултимедия.
конст качване = multer({
съхранение: storageEngine,
граници: { размер на файла: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (файл, cb);
},
});
Стъпка 4: Използване на Multer като Express Middleware
След това трябва да внедрите манипулатори на маршрути, които ще обработват качванията на изображения.
Multer може да обработва както единични, така и множество качвания на изображения в зависимост от конфигурацията.
Добавете кодовия блок по-долу към вашия app.js файл за създаване на манипулатор на маршрут за качване на единично изображение:
app.post("/single", upload.single("изображение"), (req, res) => {
ако (изискване.файл) {
res.send("Единичен файл е качен успешно");
} друго {
res.status (400).send("Моля, качете валидно изображение");
}
});
В кодовия блок по-горе вие извикахте единичен метод на качване променлива, която съхранява вашата конфигурация на multer. Този метод връща междинен софтуер, който обработва „единичен файл“, свързан с даденото поле на формуляр. След това преминахте изображение като полето на формуляра.
Накрая проверете дали даден файл е качен през изискване обект в файл Имот. Ако е така, изпращате съобщение за успех, в противен случай изпращате съобщение за грешка.
Добавете кодовия блок по-долу към вашия app.js файл за създаване на манипулатор на маршрут за множество качвания на изображения:
app.post("/multiple", upload.array("изображения", 5), (req, res) => {
ако (изискване.файлове) {
res.send("Няколко файла са качени успешно");
} друго {
res.status (400).send("Моля, качете валидни изображения");
}
});
В кодовия блок по-горе вие извикахте масив метод на качване променлива, която съхранява вашата конфигурация на multer. Този метод приема два аргумента – име на поле и максимален брой – и връща междинен софтуер, който обработва множество файлове, споделящи едно и също име на поле. Тогава ти премина изображения като поле за споделен формуляр и 5 като максимален брой изображения, които могат да бъдат качени наведнъж.
Предимства от използването на Multer
Използването на Multer във вашите приложения Node.js опростява иначе сложния процес на качване и запазване на изображения директно на вашия сървър. Multer също е базиран на busboy, модул Node.js за анализиране на входящи данни от формуляри, което го прави много ефективен за анализиране на данни от формуляри.