Existují tři hlavní způsoby zpracování nahrávání souborů v Node.js: ukládání obrázků přímo na váš server, ukládání obrázků binární data nebo data řetězce base64 do vaší databáze a pomocí bucketů Amazon Web Service (AWS) S3 k ukládání a správě snímky.

Zde se v několika krocích naučíte používat Multer, middleware Node.js, k nahrávání a ukládání obrázků přímo na váš server v aplikacích Node.js.

Krok 1: Nastavení vývojového prostředí

Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT.

Nejprve vytvořte složku projektu a přesuňte se do ní spuštěním následujícího příkazu:

mkdir multer-tutorial
CD multer-tutorial

Dále inicializujte npm v adresáři projektu spuštěním:

npm init -y

Dále budete muset nainstalovat některé závislosti. Závislosti požadované pro tento tutoriál zahrnují:

  • Vyjádřit: Express je framework Node.js který poskytuje robustní sadu funkcí pro webové a mobilní aplikace. Usnadňuje vytváření backendových aplikací pomocí Node.js.
  • Multer: Multer je expresní middleware, který zjednodušuje nahrávání a ukládání obrázků na váš server.
instagram viewer

Nainstalujte balíčky pomocí správce balíčků uzlů spuštěním:

npm Nainstalujte expres multer

Dále vytvořte app.js soubor v kořenovém adresáři vašeho projektu a přidejte blok kódu níže, abyste vytvořili základní expresní server:

//app.js
konst vyjádřit = vyžadovat('vyjádřit');
konst app = express();
konst port = proces.env. PORT || 3000;
app.listen (port, ()=>{
řídicí panel.log(`Aplikace naslouchá na portu ${port}`);
});

Krok 2: Konfigurace Multer

Nejprve import mudrovat ve vašem app.js soubor.

konst mudrovat = vyžadovat("multer");

mudrovat vyžaduje úložiště, které obsahuje informace o adresáři, kde budou uloženy nahrané soubory a jak budou soubory pojmenovány.

A mudrovat storage engine je vytvořen voláním diskové úložiště metoda na import mudrovat modul. Tato metoda vrací a StorageEngine implementace nakonfigurovaná pro ukládání souborů v lokálním systému souborů.

Vyžaduje konfigurační objekt se dvěma vlastnostmi: destinace, což je řetězec nebo funkce, která určuje, kam budou nahrané obrázky uloženy.

Druhá vlastnost, název souboru, je funkce, která určuje názvy nahraných souborů. Chce to tři parametry: req, soubora zpětné volání (cb). req je Express Žádost objekt, soubor je objekt obsahující informace o zpracovávaném souboru a cb je zpětné volání, které určuje názvy nahraných souborů. Funkce zpětného volání bere chybu a název souboru jako argumenty.

Přidejte blok kódu níže do svého app.js soubor k vytvoření úložiště:

//Nastavení úložiště
konst storageEngine = multer.diskStorage({
 destinace: "./snímky",
 název_souboru: (req, file, cb) => {
 cb(nula, `${datum.Nyní()}--${file.originalname}`);
 },
});

Ve výše uvedeném bloku kódu nastavíte destinace majetek do “./snímky“, takže obrázky budou uloženy v adresáři vašeho projektu v souboru snímky složku. Pak jste ve zpětném volání prošli nula jako chyba a řetězec šablony jako název souboru. Řetězec šablony se skládá z časového razítka generovaného voláním Date.now() abyste zajistili, že názvy obrázků jsou vždy jedinečné, dvěma pomlčkami oddělte název souboru a časové razítko a původní název souboru, který je přístupný z soubor objekt.

Výsledné řetězce z této šablony budou vypadat takto: 1663080276614--example.jpg.

Dále je třeba provést inicializaci mudrovat s úložným motorem.

Přidejte blok kódu níže do svého app.js soubor pro inicializaci multeru pomocí úložiště:

//inicializace multeru
konst upload = multer({
 úložiště: storageEngine,
});

mudrovat vrátí instanci Multer, která poskytuje několik metod pro generování middlewaru, který zpracovává soubory nahrané do multipart/form-data formát.

Ve výše uvedeném bloku kódu předáte konfigurační objekt s a úložný prostor vlastnost nastavena na storageEngine, což je modul úložiště, který jste vytvořili dříve.

V současné době je vaše konfigurace Multer dokončena, ale neexistují žádná ověřovací pravidla, která by zajistila, že na váš server lze ukládat pouze obrázky.

Krok 3: Přidání pravidel pro ověření obrázku

Prvním ověřovacím pravidlem, které můžete přidat, je maximální povolená velikost obrázku, který má být nahrán do vaší aplikace.

Aktualizujte svůj konfigurační objekt multeru pomocí níže uvedeného bloku kódu:

konst upload = multer({
 úložiště: storageEngine,
limity: { velikost souboru: 1000000 },
});

Do bloku kódu výše jste přidali a limity vlastnost do konfiguračního objektu. Tato vlastnost je objekt, který určuje různé limity pro příchozí data. Nastavíte velikost souboru vlastnost, pomocí které se nastavuje maximální velikost souboru v bajtech 1000000, což odpovídá 1 MB.

Další ověřovací pravidlo, které můžete přidat, je fileFilter vlastnost, volitelná funkce pro kontrolu, které soubory se nahrávají. Tato funkce je volána pro každý zpracovávaný soubor. Tato funkce má stejné parametry jako název souboru funkce: req, soubor, a cb.

Aby byl váš kód čistší a lépe použitelný, abstrahujete veškerou logiku filtrování do funkce.

Přidejte blok kódu níže do svého app.js soubor k implementaci logiky filtrování souborů:

konst cesta = vyžadovat("cesta");
konst checkFileType = funkce (soubor, cb) {
//Povolené přípony souborů
konst fileTypes = /jpeg|jpg|png|gif|svg/;
 //šek rozšíření jména
konst extName = fileTypes.test (cesta.extname (file.originalname).toLowerCase());
konst mimeType = fileTypes.test (file.mimetype);
 if (mimeType && extName) {
vrátit se cb(nula, skutečný);
 } jiný {
 cb("Chyba: Můžete nahrávat pouze obrázky!!");
 }
};

The checkFileType funkce má dva parametry: soubor a cb.

Ve výše uvedeném bloku kódu jste definovali a typy souborů proměnná, která ukládá výraz regulárního výrazu s povolenými příponami souboru obrázku. Dále jste zavolali test metoda na výrazu regulárního výrazu.

The test metoda zkontroluje shodu v předaném řetězci a vrátí skutečný nebo Nepravdivé podle toho, zda najde shodu. Poté předáte název nahraného souboru, ke kterému máte přístup soubor.původní název, do modulu cesty extname metoda, která mu vrátí rozšíření cesty řetězce. Nakonec zřetězte JavaScript na malá písmena string funkce k výrazu pro zpracování obrázků s jejich příponami psanými velkými písmeny.

Samotná kontrola názvu rozšíření nestačí, protože názvy rozšíření lze snadno upravit. Chcete-li zajistit, aby byly nahrány pouze obrázky, musíte zaškrtnout MIME typ také. Můžete přistupovat k souboru mimetyp majetku prostřednictvím soubor.mimetype. Takže zkontrolujte mimetyp nemovitost pomocí test stejně jako u názvů rozšíření.

Pokud obě podmínky vrátí hodnotu true, vrátíte zpětné volání s nula a true, nebo vrátíte zpětné volání s chybou.

Nakonec přidáte fileFilter vlastnost vaší konfigurace multeru.

konst upload = multer({
 úložiště: storageEngine,
limity: { velikost souboru: 10000000 },
 fileFilter: (req, file, cb) => {
 checkFileType (soubor, cb);
 },
});

Krok 4: Použití Multeru jako expresního middlewaru

Dále musíte implementovat obslužné nástroje směrování, které budou zpracovávat nahrávání obrázků.

Multer zvládne nahrání jednoho i více obrázků v závislosti na konfiguraci.

Přidejte blok kódu níže do svého app.js soubor k vytvoření obslužného programu trasy pro nahrávání jednoho obrázku:

app.post("/single", upload.single("obraz"), (req, res) => {
-li (req.soubor) {
 znovu.odeslat("Jeden soubor byl úspěšně nahrán");
 } jiný {
 res.stav (400).odeslat("Nahrajte prosím platný obrázek");
 }
});

V bloku kódu výše jste zavolali singl metoda na nahrát proměnná, která ukládá vaši konfiguraci multeru. Tato metoda vrací middleware, který zpracovává „jeden soubor“ spojený s daným polem formuláře. Pak jste prošli obraz jako pole formuláře.

Nakonec zkontrolujte, zda byl soubor nahrán přes req objekt v soubor vlastnictví. Pokud ano, odešlete zprávu o úspěchu, jinak pošlete chybovou zprávu.

Přidejte blok kódu níže do svého app.js soubor pro vytvoření obslužné rutiny trasy pro nahrání více obrázků:

app.post("/multiple", upload.array("snímky", 5), (req, res) => {
-li (req.soubory) {
 znovu.odeslat("Více souborů bylo úspěšně nahráno");
 } jiný {
 res.stav (400).odeslat("Nahrajte prosím platné obrázky");
 }
});

V bloku kódu výše jste zavolali pole metoda na nahrát proměnná, která ukládá vaši konfiguraci multeru. Tato metoda používá dva argumenty – název pole a maximální počet – a vrací middleware, který zpracovává více souborů sdílejících stejný název pole. Pak jsi prošel snímky jako pole sdíleného formuláře a 5 jako maximální počet obrázků, které lze nahrát najednou.

Výhody použití Multer

Použití Multer ve vašich Node.js aplikacích zjednodušuje jinak komplikovaný proces nahrávání a ukládání obrázků přímo na váš server. Multer je také založen na busboy, modulu Node.js pro analýzu příchozích dat formulářů, díky čemuž je velmi efektivní pro analýzu dat formuláře.