Det finns tre huvudsakliga sätt att hantera filuppladdningar i Node.js: spara bilderna direkt på din server, spara bildens binära data eller base64-strängdata till din databas och använda Amazon Web Service (AWS) S3-hinkar för att spara och hantera din bilder.
Här får du lära dig hur du använder Multer, en Node.js-mellanvara, för att ladda upp och spara bilder direkt till din server i Node.js-applikationer i några få steg.
Steg 1: Konfigurera utvecklingsmiljö
Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen.
Skapa först en projektmapp och flytta in i den genom att köra följande kommando:
mkdir multer-tutorial
CD multi-tutorial
Initiera sedan npm i din projektkatalog genom att köra:
npm init -y
Därefter måste du installera vissa beroenden. De beroenden som krävs för denna handledning inkluderar:
- uttrycka: Express är ett Node.js-ramverk som ger en robust uppsättning funktioner för webb- och mobilapplikationer. Det gör det enklare att bygga backend-applikationer med Node.js.
- Multer: Multer är ett uttryckligt mellanprogram som förenklar uppladdning och lagring av bilder till din server.
Installera paketen med nodpakethanteraren genom att köra:
npm Installera uttrycka multer
Skapa sedan en app.js fil i ditt projekts rotkatalog och lägg till kodblocket nedan för att skapa en grundläggande Express-server:
//app.js
konst uttrycka = behöva('uttrycka');
konst app = express();
konst port = process.env. PORT || 3000;
app.listen (port, ()=>{
trösta.logga(`Appen lyssnar på hamn ${port}`);
});
Steg 2: Konfigurera Multer
Först, importera multera i din app.js fil.
konst multera = behöva("multera");
multera kräver en lagringsmotor som innehåller information om katalogen där de uppladdade filerna kommer att lagras och hur filerna kommer att namnges.
A multera lagringsmotor skapas genom att anropa disklagring metod på den importerade multera modul. Denna metod returnerar en StorageEngine implementering konfigurerad för att lagra filer på det lokala filsystemet.
Det kräver ett konfigurationsobjekt med två egenskaper: destination, som är en sträng eller funktion som anger var de uppladdade bilderna kommer att lagras.
Den andra fastigheten, filnamn, är en funktion som bestämmer de uppladdade filernas namn. Det krävs tre parametrar: req, fil, och en återuppringning (cb). req är Expressen Begäran objekt, fil är ett objekt som innehåller information om den bearbetade filen, och cb är en återuppringning som bestämmer de uppladdade filernas namn. Återuppringningsfunktionen tar fel och filnamn som argument.
Lägg till kodblocket nedan till din app.js fil för att skapa en lagringsmotor:
//Ställa in lagringsmotor
konst storageEngine = multer.diskStorage({
destination: "./bilder",
filnamn: (req, fil, cb) => {
cb(null, `${Datum.nu()}--${file.originalname}`);
},
});
I kodblocket ovan ställer du in destination egendom till ”./bilder”, sålunda kommer bilderna att lagras i ditt projekts katalog i en bilder mapp. Sedan, i återuppringningen, passerade du null som felet och en mallsträng som filnamn. Mallsträngen består av en tidsstämpel som genereras genom anrop Date.now() för att säkerställa att bildnamnen alltid är unika, två bindestreck för att separera filnamnet och tidsstämpeln, och filens ursprungliga namn, som kan nås från fil objekt.
De resulterande strängarna från denna mall kommer att se ut så här: 1663080276614--exempel.jpg.
Därefter måste du initiera multera med lagringsmotorn.
Lägg till kodblocket nedan till din app.js fil för att initiera multer med lagringsmotorn:
//initiering av multer
konst ladda upp = multer({
lagring: storageEngine,
});
multera returnerar en Multer-instans som tillhandahåller flera metoder för att generera mellanprogram som bearbetar filer som laddats upp i multipart/form-data formatera.
I kodblocket ovan skickar du ett konfigurationsobjekt med en lagring egenskapen inställd på lagringsmotor, som är lagringsmotorn du skapade tidigare.
För närvarande är din Multer-konfiguration klar, men det finns inga valideringsregler som säkerställer att endast bilder kan sparas på din server.
Steg 3: Lägga till regler för bildvalidering
Den första valideringsregeln du kan lägga till är den högsta tillåtna storleken för en bild som ska laddas upp till din applikation.
Uppdatera ditt multerkonfigurationsobjekt med kodblocket nedan:
konst ladda upp = multer({
lagring: storageEngine,
gränser: { filstorlek: 1000000 },
});
I kodblocket ovan lade du till en gränser egenskap till konfigurationsobjektet. Den här egenskapen är ett objekt som anger olika gränser för inkommande data. Du ställer in filstorlek egenskap, med vilken den maximala filstorleken i byte är inställd på 1000000, vilket motsvarar 1 MB.
En annan valideringsregel du kan lägga till är filFilter egenskap, en valfri funktion för att styra vilka filer som laddas upp. Denna funktion anropas för varje fil som bearbetas. Denna funktion tar samma parametrar som filnamn fungera: req, fil, och cb.
För att göra din kod renare och mer återanvändbar, abstraherar du all filtreringslogik till en funktion.
Lägg till kodblocket nedan till din app.js fil för att implementera filfiltreringslogiken:
konst väg = behöva("väg");
konst checkFileType = fungera (fil, cb) {
//Tillåtna filtillägg
konst filtyper = /jpeg|jpg|png|gif|svg/;
//kolla upp förlängning namn
konst extName = fileTypes.test (sökväg.extname (file.originalname).toLowerCase());
konst mimeType = fileTypes.test (file.mimetype);
if (mimeType && extName) {
lämna tillbaka cb(null, Sann);
} annan {
cb("Fel: Du kan bara ladda upp bilder!!");
}
};
De checkFileType funktionen tar två parametrar: fil och cb.
I kodblocket ovan definierade du en filtyper variabel som lagrar ett regex-uttryck med de tillåtna bildfiltilläggen. Därefter ringde du till testa metod på regexuttrycket.
De testa metod söker efter en matchning i den passerade strängen och returnerar Sann eller falsk beroende på om den hittar en matchning. Sedan skickar du det uppladdade filnamnet, som du kan komma åt via fil.originalnamn, in i sökvägens modul extname metod, som returnerar förlängningen av strängsökvägen till den. Slutligen kedjar du JavaScript till LowerCase strängfunktion till uttrycket för att hantera bilder med deras tilläggsnamn i versaler.
Det räcker inte att enbart kontrollera tilläggsnamnet, eftersom tilläggsnamn enkelt kan redigeras. För att säkerställa att endast bilder laddas upp måste du kontrollera MIME-typ för. Du kan komma åt en fil mimetyp egendom genom file.mimetype. Så du kollar efter mimetyp egendom med hjälp av testa metod som du gjorde för tilläggsnamnen.
Om de två villkoren är sanna returnerar du återuppringningen med null och sant, eller så returnerar du återuppringningen med ett fel.
Slutligen lägger du till filFilter egendom till din multer-konfiguration.
konst ladda upp = multer({
lagring: storageEngine,
gränser: { filstorlek: 10000000 },
filFilter: (req, fil, cb) => {
checkFileType (fil, cb);
},
});
Steg 4: Använd Multer som en Express-mellanvara
Därefter måste du implementera rutthanterare som hanterar bilduppladdningarna.
Multer kan hantera både enstaka och flera bilduppladdningar beroende på konfigurationen.
Lägg till kodblocket nedan till din app.js fil för att skapa en rutthanterare för enstaka bilduppladdningar:
app.post("/single", upload.single("bild"), (req, res) => {
om (req.fil) {
res.send("Enskild fil har laddats upp");
} annan {
res.status (400).send("Ladda upp en giltig bild");
}
});
I kodblocket ovan anropade du enda metod på ladda upp variabel, som lagrar din multer-konfiguration. Den här metoden returnerar en mellanprogramvara som bearbetar en "enskild fil" associerad med det givna formulärfältet. Sedan passerade du bild som formulärfältet.
Slutligen, kontrollera om en fil laddades upp via req objekt i fil fast egendom. Om det var så skickar du ett framgångsmeddelande, annars skickar du ett felmeddelande.
Lägg till kodblocket nedan till din app.js fil för att skapa en rutthanterare för flera bilduppladdningar:
app.post("/multiple", upload.array("bilder", 5), (req, res) => {
om (req.filer) {
res.send("Flera filer har laddats upp");
} annan {
res.status (400).send("Ladda upp en giltig bild");
}
});
I kodblocket ovan anropade du array metod på ladda upp variabel, som lagrar din multer-konfiguration. Den här metoden tar två argument – ett fältnamn och ett maxantal – och returnerar mellanprogram som bearbetar flera filer som delar samma fältnamn. Sedan gick du igenom bilder som det delade formulärfältet och 5 som det maximala antalet bilder som kan laddas upp på en gång.
Fördelar med att använda Multer
Att använda Multer i dina Node.js-applikationer förenklar den annars komplicerade processen att ladda upp och spara bilder direkt på din server. Multer är också baserat på busboy, en Node.js-modul för att analysera inkommande formulärdata, vilket gör den mycket effektiv för att analysera formulärdata.