Der er tre hovedmåder at håndtere filuploads i Node.js: gemme billederne direkte på din server, gemme billedets binære data eller base64-strengdata til din database, og brug af Amazon Web Service (AWS) S3-spande til at gemme og administrere dine billeder.
Her lærer du, hvordan du bruger Multer, en Node.js-middleware, til at uploade og gemme billeder direkte til din server i Node.js-applikationer i nogle få trin.
Trin 1: Opsætning af udviklingsmiljø
Koden brugt i dette projekt er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT-licensen.
Først skal du oprette en projektmappe og flytte ind i den ved at køre følgende kommando:
mkdir multer-tutorial
cd multi-tutorial
Start derefter npm i din projektmappe ved at køre:
npm init -y
Dernæst skal du installere nogle afhængigheder. De afhængigheder, der kræves til denne øvelse, omfatter:
- Express: Express er en Node.js-ramme der giver et robust sæt funktioner til web- og mobilapplikationer. Det gør det nemmere at bygge backend-applikationer med Node.js.
- Multer: Multer er en ekspres middleware, der forenkler upload og lagring af billeder på din server.
Installer pakkerne med nodepakkehåndteringen ved at køre:
npm installere udtrykke multer
Opret derefter en app.js fil i dit projekts rodmappe, og tilføj kodeblokken nedenfor for at oprette en grundlæggende Express-server:
//app.js
konst udtrykke = kræve('udtryk');
konst app = express();
konst port = proces.env. PORT || 3000;
app.listen (port, ()=>{
konsol.log(`App lytter på port ${port}`);
});
Trin 2: Konfiguration af Multer
Først, import multere i din app.js fil.
konst multer = kræve("multer");
multere kræver en lagringsmotor, der indeholder oplysninger om den mappe, hvor de uploadede filer vil blive gemt, og hvordan filerne vil blive navngivet.
EN multere lagermotor oprettes ved at kalde diskStorage metode på det importerede multere modul. Denne metode returnerer en StorageEngine implementering konfigureret til at gemme filer på det lokale filsystem.
Det kræver et konfigurationsobjekt med to egenskaber: bestemmelsessted, som er en streng eller funktion, der specificerer, hvor de uploadede billeder vil blive gemt.
Den anden ejendom, filnavn, er en funktion, der bestemmer de uploadede filers navne. Det kræver tre parametre: req, fil, og et tilbagekald (cb). req er Expressen Anmodning objekt, fil er et objekt, der indeholder information om den behandlede fil, og cb er et tilbagekald, der bestemmer de uploadede filers navne. Tilbagekaldsfunktionen tager fejl og filnavn som argumenter.
Tilføj kodeblokken nedenfor til din app.js fil for at oprette en lagermaskine:
//Indstilling af lagermotor
konst storageEngine = multer.diskStorage({
bestemmelsessted: "./billeder",
filnavn: (req, fil, cb) => {
cb(nul, `${Dato.nu()}--${file.originalname}`);
},
});
I kodeblokken ovenfor indstiller du bestemmelsessted ejendom til”./billeder”, således vil billederne blive gemt i dit projekts bibliotek i en billeder folder. Så, i tilbagekaldet, bestod du nul som fejlen og en skabelonstreng som filnavnet. Skabelonstrengen består af et tidsstempel genereret ved opkald Dato.nu() for at sikre, at billednavnene altid er unikke, to bindestreger for at adskille filnavnet og tidsstemplet og filens originale navn, som kan tilgås fra fil objekt.
De resulterende strenge fra denne skabelon vil se sådan ud: 1663080276614--eksempel.jpg.
Dernæst skal du initialisere multere med lagermotoren.
Tilføj kodeblokken nedenfor til din app.js fil for at initialisere multer med lagermotoren:
//initialisering af multer
konst upload = multer({
opbevaring: storageEngine,
});
multere returnerer en Multer-instans, der giver flere metoder til at generere middleware, der behandler filer uploadet i multipart/form-data format.
I kodeblokken ovenfor sender du et konfigurationsobjekt med en opbevaring egenskab sat til opbevaringsmotor, som er den lagermaskine, du oprettede tidligere.
I øjeblikket er din Multer-konfiguration færdig, men der er ingen valideringsregler, der sikrer, at kun billeder kan gemmes på din server.
Trin 3: Tilføjelse af billedvalideringsregler
Den første valideringsregel, du kan tilføje, er den maksimalt tilladte størrelse for et billede, der kan uploades til din ansøgning.
Opdater dit multer-konfigurationsobjekt med nedenstående kodeblok:
konst upload = multer({
opbevaring: storageEngine,
grænser: { filstørrelse: 1000000 },
});
I kodeblokken ovenfor tilføjede du en grænser egenskab til konfigurationsobjektet. Denne egenskab er et objekt, der angiver forskellige grænser for indgående data. Du indstiller filstørrelse egenskab, som den maksimale filstørrelse i bytes er sat til 1000000, hvilket svarer til 1 MB.
En anden valideringsregel, du kan tilføje, er filfilter egenskab, en valgfri funktion til at kontrollere, hvilke filer der uploades. Denne funktion kaldes for hver fil, der behandles. Denne funktion tager de samme parametre som filnavn fungere: req, fil, og cb.
For at gøre din kode renere og mere genbrugelig, abstraherer du al filtreringslogikken til en funktion.
Tilføj kodeblokken nedenfor til din app.js fil for at implementere filfiltreringslogikken:
konst sti = kræve("sti");
konst checkFileType = fungere (fil, cb) {
//Tilladte filtypenavne
konst filtyper = /jpeg|jpg|png|gif|svg/;
//kontrollere udvidelse navne
konst extName = fileTypes.test (sti.extname (file.originalname).toLowerCase());
konst mimeType = fileTypes.test (file.mimetype);
if (mimeType && extName) {
Vend tilbage cb(nul, rigtigt);
} andet {
cb("Fejl: Du kan kun uploade billeder!!");
}
};
Det checkFileType Funktionen tager to parametre: fil og cb.
I kodeblokken ovenfor definerede du en filtyper variabel, der gemmer et regex-udtryk med de tilladte billedfiltypenavne. Dernæst ringede du til prøve metode på regex-udtrykket.
Det prøve metoden kontrollerer for et match i den beståede streng og returnerer rigtigt eller falsk alt efter om den finder et match. Derefter sender du det uploadede filnavn, som du kan få adgang til via fil.originalnavn, ind i stiens modul extname metode, som returnerer forlængelsen af strengstien til den. Til sidst kæder du JavaScript til LowerCase strengfunktion til udtrykket for at håndtere billeder med deres udvidelsesnavne med store bogstaver.
Det er ikke nok at kontrollere udvidelsesnavnet alene, da udvidelsesnavne nemt kan redigeres. For at sikre, at kun billeder uploades, skal du kontrollere MIME-type også. Du kan få adgang til en fil mimetype ejendom gennem fil.mimetype. Så du tjekker efter mimetype ejendom ved hjælp af prøve metode, som du gjorde for udvidelsesnavnene.
Hvis de to betingelser returnerer sande, returnerer du tilbagekaldet med nul og sand, eller du returnerer tilbagekaldet med en fejl.
Til sidst tilføjer du filfilter ejendom til din multer-konfiguration.
konst upload = multer({
opbevaring: storageEngine,
grænser: { filstørrelse: 10000000 },
filFilter: (req, fil, cb) => {
checkFileType (fil, cb);
},
});
Trin 4: Brug af Multer som en Express Middleware
Dernæst skal du implementere rutebehandlere, der håndterer upload af billeder.
Multer kan håndtere både enkelte og flere billeduploads afhængigt af konfigurationen.
Tilføj kodeblokken nedenfor til din app.js fil for at oprette en rutehandler til upload af enkeltbilleder:
app.post("/single", upload.single("billede"), (req, res) => {
hvis (req.fil) {
res.send("Enkelt fil blev uploadet");
} andet {
res.status (400).send("Upload venligst et gyldigt billede");
}
});
I kodeblokken ovenfor kaldte du enkelt metode på upload variabel, som gemmer din multer-konfiguration. Denne metode returnerer en middleware, der behandler en "enkelt fil", der er knyttet til det givne formularfelt. Så bestod du billede som formularfeltet.
Til sidst skal du kontrollere, om en fil blev uploadet via req genstand i fil ejendom. Hvis det var, sender du en succesmeddelelse, ellers sender du en fejlmeddelelse.
Tilføj kodeblokken nedenfor til din app.js fil for at oprette en rutehandler til flere billeduploads:
app.post("/multiple", upload.array("billeder", 5), (req, res) => {
hvis (req.filer) {
res.send("Flere filer blev uploadet");
} andet {
res.status (400).send("Upload venligst et gyldigt billede");
}
});
I kodeblokken ovenfor kaldte du array metode på upload variabel, som gemmer din multer-konfiguration. Denne metode tager to argumenter – et feltnavn og et maksimalt antal – og returnerer middleware, der behandler flere filer, der deler det samme feltnavn. Så bestod du billeder som det delte formularfelt og 5 som det maksimale antal billeder, der kan uploades på én gang.
Fordele ved at bruge Multer
Brug af Multer i dine Node.js-applikationer forenkler den ellers komplicerede proces med at uploade og gemme billeder direkte på din server. Multer er også baseret på busboy, et Node.js-modul til at parse indgående formulardata, hvilket gør det meget effektivt til at parse formulardata.
