Existujú tri hlavné spôsoby spracovania nahrávania súborov v Node.js: ukladanie obrázkov priamo na váš server, ukladanie obrázkov binárne dáta alebo databázové reťazce base64 do vašej databázy a pomocou bucketov Amazon Web Service (AWS) S3 ukladať a spravovať snímky.
Tu sa v niekoľkých krokoch naučíte používať Multer, middleware Node.js, na nahrávanie a ukladanie obrázkov priamo na váš server v aplikáciách Node.js.
Krok 1: Nastavenie vývojového prostredia
Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.
Najprv vytvorte priečinok projektu a presuňte sa doň spustením nasledujúceho príkazu:
mkdir multer-tutorial
cd multer-tutorial
Ďalej inicializujte npm v adresári projektu spustením:
npm init -y
Ďalej budete musieť nainštalovať nejaké závislosti. Závislosti požadované pre tento tutoriál zahŕňajú:
- expresné: Express je rámec Node.js ktorý poskytuje robustnú sadu funkcií pre webové a mobilné aplikácie. Uľahčuje vytváranie backendových aplikácií pomocou Node.js.
- Multer: Multer je expresný middleware, ktorý zjednodušuje nahrávanie a ukladanie obrázkov na váš server.
Nainštalujte balíky s správca balíkov uzlov behom:
npm Inštalácia expres multer
Ďalej vytvorte app.js súbor v koreňovom adresári vášho projektu a pridajte blok kódu nižšie, aby ste vytvorili základný expresný server:
//app.js
konšt vyjadriť = vyžadovať('expresné');
konšt app = express();
konšt port = process.env. PORT || 3000;
app.listen (port, ()=>{
konzoly.log(„Aplikácia počúva na porte ${port}`);
});
Krok 2: Konfigurácia Multer
Najprv import mudrovať v tvojom app.js súbor.
konšt mudrovať = vyžadovať("mrmlať");
mudrovať vyžaduje ukladací mechanizmus, ktorý obsahuje informácie o adresári, kde budú uložené nahrané súbory a ako budú súbory pomenované.
A mudrovať storage engine sa vytvorí volaním diskStorage metóda na import mudrovať modul. Táto metóda vráti a StorageEngine implementácia nakonfigurovaná na ukladanie súborov v lokálnom súborovom systéme.
Vyžaduje konfiguračný objekt s dvoma vlastnosťami: destinácia, čo je reťazec alebo funkcia, ktorá určuje, kam sa nahrané obrázky uložia.
Druhá vlastnosť, názov súboru, je funkcia, ktorá určuje názvy nahrávaných súborov. Vyžaduje si to tri parametre: req, súbora spätné volanie (cb). req je Express Žiadosť objekt, súbor je objekt obsahujúci informácie o spracovávanom súbore a cb je spätné volanie, ktoré určuje názvy nahraných súborov. Funkcia spätného volania berie chybu a názov súboru ako argumenty.
Pridajte blok kódu nižšie do svojho app.js súbor na vytvorenie úložiska:
//Nastavenie úložiska
konšt storageEngine = multer.diskStorage({
destinácia: "./snímky",
názov súboru: (req, file, cb) => {
cb(nulový, `${Dátum.now()}--${file.originalname}`);
},
});
Vo vyššie uvedenom bloku kódu nastavíte destinácia majetok do “./snímky“, takže obrázky budú uložené v adresári vášho projektu v súbore snímky priečinok. Potom ste v spätnom volaní prešli nulový ako chyba a reťazec šablóny ako názov súboru. Reťazec šablóny pozostáva z časovej pečiatky vygenerovanej volaním Date.now() aby ste zabezpečili, že názvy obrázkov budú vždy jedinečné, dve pomlčky oddeľujú názov súboru a časovú pečiatku a pôvodný názov súboru, ktorý je prístupný z súbor objekt.
Výsledné reťazce z tejto šablóny budú vyzerať takto: 1663080276614--example.jpg.
Ďalej je potrebné inicializovať mudrovať s ukladacím motorom.
Pridajte blok kódu nižšie do svojho app.js súbor na inicializáciu multeru s ukladacím mechanizmom:
//inicializuje sa multer
konšt upload = multer({
úložisko: storageMotor,
});
mudrovať vráti inštanciu Multer, ktorá poskytuje niekoľko metód na generovanie midlvéru, ktorý spracováva nahrané súbory multipart/form-data formát.
Vo vyššie uvedenom bloku kódu odovzdávate konfiguračný objekt s a skladovanie vlastnosť nastavená na storageEngine, čo je ukladací mechanizmus, ktorý ste vytvorili predtým.
V súčasnosti je vaša konfigurácia Multer dokončená, ale neexistujú žiadne overovacie pravidlá, ktoré by zaručovali, že na váš server je možné ukladať iba obrázky.
Krok 3: Pridanie pravidiel overenia obrázka
Prvé overovacie pravidlo, ktoré môžete pridať, je maximálna povolená veľkosť obrázka, ktorý sa má nahrať do vašej aplikácie.
Aktualizujte svoj objekt konfigurácie multeru pomocou nižšie uvedeného bloku kódu:
konšt upload = multer({
úložisko: storageMotor,
limity: { veľkosť súboru: 1000000 },
});
Do bloku kódu vyššie ste pridali a limity vlastnosť na konfiguračný objekt. Táto vlastnosť je objekt, ktorý špecifikuje rôzne limity pre prichádzajúce dáta. Nastavíte veľkosť súboru vlastnosť, pomocou ktorej sa nastavuje maximálna veľkosť súboru v bajtoch 1000000, čo zodpovedá 1 MB.
Ďalšie overovacie pravidlo, ktoré môžete pridať, je fileFilter vlastnosť, voliteľná funkcia na kontrolu, ktoré súbory sa nahrávajú. Táto funkcia sa volá pre každý spracovávaný súbor. Táto funkcia má rovnaké parametre ako názov súboru funkcia: req, súbor, a cb.
Aby bol váš kód čistejší a opakovane použiteľný, celú logiku filtrovania abstrahujete do funkcie.
Pridajte blok kódu nižšie do svojho app.js súbor na implementáciu logiky filtrovania súborov:
konšt cesta = vyžadovať("cesta");
konšt checkFileType = funkciu (súbor, cb) {
//Povolené prípony súborov
konšt FileTypes = /jpeg|jpg|png|gif|svg/;
//skontrolovať rozšírenie mená
konšt extName = fileTypes.test (cesta.extname (file.originalname).toLowerCase());
konšt mimeType = fileTypes.test (file.mimetype);
if (mimeType && extName) {
vrátiť cb(nulový, pravda);
} inak {
cb("Chyba: Môžete nahrať iba obrázky!!");
}
};
The checkFileType funkcia má dva parametre: súbor a cb.
Vo vyššie uvedenom bloku kódu ste definovali a FileTypes premenná, ktorá ukladá regexový výraz s povolenými príponami obrázkových súborov. Ďalej ste zavolali test metóda na výraze regulárneho výrazu.
The test metóda skontroluje zhodu v odovzdanom reťazci a vráti pravda alebo falošný podľa toho, či nájde zhodu. Potom odošlete názov nahraného súboru, ku ktorému máte prístup súbor.pôvodný názovdo modulu cesty extname metóda, ktorá mu vráti rozšírenie cesty reťazca. Nakoniec zreťazíte JavaScript na malé písmená string funkcia k výrazu na spracovanie obrázkov s ich príponami písanými veľkými písmenami.
Samotná kontrola názvu rozšírenia nestačí, pretože názvy rozšírení možno ľahko upraviť. Aby ste sa uistili, že sa nahrávajú iba obrázky, musíte skontrolovať MIME typ tiež. Môžete pristupovať k súboru mimetyp majetku cez súbor.mimetype. Takže skontrolujte mimetyp nehnuteľnosť pomocou test ako ste to urobili pre názvy rozšírení.
Ak dve podmienky vrátia hodnotu true, vrátite spätné volanie s nulový a true, alebo vrátite spätné volanie s chybou.
Nakoniec pridáte fileFilter vlastnosť vašej konfigurácie multer.
konšt upload = multer({
úložisko: storageMotor,
limity: { veľkosť súboru: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (súbor, cb);
},
});
Krok 4: Použitie Multer ako expresného middlewaru
Ďalej musíte implementovať obslužné nástroje smerovania, ktoré budú spracovávať nahrávanie obrázkov.
Multer dokáže v závislosti od konfigurácie spracovať jeden aj viac obrázkov.
Pridajte blok kódu nižšie do svojho app.js súbor na vytvorenie obslužného programu trasy pre nahrávanie jedného obrázka:
app.post("/single", upload.single("obrázok"), (req, res) => {
ak (req.súbor) {
znova.odoslať("Jeden súbor bol úspešne nahraný");
} inak {
res.status (400).send("Nahrajte platný obrázok");
}
});
Vo vyššie uvedenom bloku kódu ste zavolali slobodný metóda na nahrať premenná, ktorá ukladá vašu konfiguráciu multera. Táto metóda vracia middleware, ktorý spracováva „jeden súbor“ priradený k danému poľu formulára. Potom ste prešli cez obrázok ako pole formulára.
Nakoniec skontrolujte, či bol súbor nahraný cez req objekt v súbor nehnuteľnosť. Ak áno, odošlete správu o úspechu, inak odošlete chybovú správu.
Pridajte blok kódu nižšie do svojho app.js súbor na vytvorenie obslužného programu trasy pre nahrávanie viacerých obrázkov:
app.post("/multiple", upload.array("snímky", 5), (req, res) => {
ak (req.súbory) {
znova.odoslať("Viacero súborov bolo úspešne nahraných");
} inak {
res.status (400).send("Nahrajte platné obrázky");
}
});
Vo vyššie uvedenom bloku kódu ste zavolali pole metóda na nahrať premenná, ktorá ukladá vašu konfiguráciu multera. Táto metóda používa dva argumenty – názov poľa a maximálny počet – a vracia middleware, ktorý spracováva viacero súborov zdieľajúcich rovnaký názov poľa. Potom si prešiel snímky ako pole zdieľaného formulára a 5 ako maximálny počet obrázkov, ktoré je možné nahrať naraz.
Výhody používania služby Multer
Používanie Multer vo vašich aplikáciách Node.js zjednodušuje inak komplikovaný proces nahrávania a ukladania obrázkov priamo na váš server. Multer je tiež založený na busboy, module Node.js na analýzu prichádzajúcich údajov formulárov, vďaka čomu je veľmi efektívny na analýzu údajov formulárov.
