Det er tre hovedmåter for å håndtere filopplastinger i Node.js: lagre bildene direkte på serveren din, lagre bildets binære data eller base64-strengdata til databasen din, og ved å bruke Amazon Web Service (AWS) S3-bøtter for å lagre og administrere Bilder.
Her vil du lære hvordan du bruker Multer, en Node.js-mellomvare, for å laste opp og lagre bilder direkte til serveren din i Node.js-applikasjoner i noen få trinn.
Trinn 1: Sette opp utviklingsmiljø
Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen.
Opprett først en prosjektmappe og flytt inn i den ved å kjøre følgende kommando:
mkdir multer-tutorial
cd multi-tutorial
Deretter initialiser npm i prosjektkatalogen din ved å kjøre:
npm init -y
Deretter må du installere noen avhengigheter. Avhengighetene som kreves for denne opplæringen inkluderer:
- Uttrykke: Express er et Node.js-rammeverk som gir et robust sett med funksjoner for nett- og mobilapplikasjoner. Det gjør det enklere å bygge backend-applikasjoner med Node.js.
- Multer: Multer er en ekspressmellomvare som forenkler opplasting og lagring av bilder til serveren din.
Installer pakkene med nodepakkebehandleren ved å kjøre:
npm installere uttrykke multer
Deretter oppretter du en app.js fil i prosjektets rotkatalog og legg til kodeblokken nedenfor for å lage en grunnleggende Express-server:
//app.js
konst uttrykke = krever('uttrykke');
konst app = express();
konst port = prosess.env. PORT || 3000;
app.listen (port, ()=>{
konsoll.Logg(`Appen lytter på port ${port}`);
});
Trinn 2: Konfigurere Multer
Først, import multere i din app.js fil.
konst multer = krever("multer");
multere krever en lagringsmotor som inneholder informasjon om katalogen der de opplastede filene skal lagres og hvordan filene vil bli navngitt.
EN multere lagringsmotoren opprettes ved å kalle disklagring metode på den importerte multere modul. Denne metoden returnerer en StorageEngine implementering konfigurert til å lagre filer på det lokale filsystemet.
Det krever et konfigurasjonsobjekt med to egenskaper: mål, som er en streng eller funksjon som spesifiserer hvor de opplastede bildene skal lagres.
Den andre eiendommen, filnavn, er en funksjon som bestemmer navnene til de opplastede filene. Det krever tre parametere: rekv, fil, og en tilbakeringing (cb). rekv er Expressen Be om gjenstand, fil er et objekt som inneholder informasjon om den behandlede filen, og cb er en tilbakeringing som bestemmer navnene til de opplastede filene. Tilbakeringingsfunksjonen tar feil og filnavn som argumenter.
Legg til kodeblokken nedenfor til din app.js fil for å lage en lagringsmotor:
//Innstilling av lagringsmotor
konst storageEngine = multer.diskStorage({
mål: "./Bilder",
filnavn: (req, fil, cb) => {
cb(null, `${Dato.nå()}--${file.originalname}`);
},
});
I kodeblokken ovenfor angir du mål eiendom til ”./Bilder”, dermed vil bildene bli lagret i prosjektets katalog i en Bilder mappe. Så, i tilbakeringingen, bestod du null som feilen og en malstreng som filnavn. Malstrengen består av et tidsstempel generert ved å ringe Dato.nå() for å sikre at bildenavnene alltid er unike, to bindestreker for å skille filnavnet og tidsstemplet, og filens opprinnelige navn, som kan nås fra fil gjenstand.
De resulterende strengene fra denne malen vil se slik ut: 1663080276614--eksempel.jpg.
Deretter må du initialisere multere med lagringsmotoren.
Legg til kodeblokken nedenfor til din app.js fil for å initialisere multer med lagringsmotoren:
//initialisering av multer
konst last opp = multer({
lagring: storageEngine,
});
multere returnerer en Multer-forekomst som gir flere metoder for å generere mellomvare som behandler filer lastet opp i multipart/form-data format.
I kodeblokken ovenfor sender du et konfigurasjonsobjekt med en Oppbevaring egenskap satt til lagringsmotor, som er lagringsmotoren du opprettet tidligere.
For øyeblikket er Multer-konfigurasjonen fullført, men det er ingen valideringsregler som sikrer at kun bilder kan lagres på serveren din.
Trinn 3: Legge til bildevalideringsregler
Den første valideringsregelen du kan legge til er den maksimale størrelsen som er tillatt for et bilde som skal lastes opp til applikasjonen din.
Oppdater multer-konfigurasjonsobjektet ditt med kodeblokken nedenfor:
konst last opp = multer({
lagring: storageEngine,
grenser: { filstørrelse: 1000000 },
});
I kodeblokken ovenfor la du til en grenser egenskap til konfigurasjonsobjektet. Denne egenskapen er et objekt som spesifiserer ulike grenser for innkommende data. Du stiller inn filstørrelse egenskap, som den maksimale filstørrelsen i byte er satt til 1000000, som tilsvarer 1 MB.
En annen valideringsregel du kan legge til er filfilter egenskap, en valgfri funksjon for å kontrollere hvilke filer som lastes opp. Denne funksjonen kalles for hver fil som behandles. Denne funksjonen tar de samme parameterne som filnavn funksjon: rekv, fil, og cb.
For å gjøre koden renere og mer gjenbrukbar, abstraherer du all filtreringslogikken til en funksjon.
Legg til kodeblokken nedenfor til din app.js fil for å implementere filfiltreringslogikken:
konst sti = krever("sti");
konst checkFileType = funksjon (fil, cb) {
//Tillatte filutvidelser
konst filtyper = /jpeg|jpg|png|gif|svg/;
//Sjekk Utvidelse navn
konst extName = fileTypes.test (bane.extname (file.originalname).toLowerCase());
konst mimeType = filtyper.test (fil.mimetype);
if (mimeType && extName) {
komme tilbake cb(null, ekte);
} ellers {
cb("Feil: Du kan bare laste opp bilder!!");
}
};
De checkFileType funksjonen tar to parametere: fil og cb.
I kodeblokken ovenfor definerte du en filtyper variabel som lagrer et regex-uttrykk med de tillatte bildefiltypene. Deretter ringte du test metode på regex-uttrykket.
De test metoden sjekker for samsvar i den passerte strengen og returnerer ekte eller falsk avhengig av om den finner en match. Deretter sender du det opplastede filnavnet, som du kan få tilgang til gjennom fil.originalnavn, inn i banens modul extname metode, som returnerer utvidelsen av strengbanen til den. Til slutt lenker du JavaScript til LowerCase strengfunksjon til uttrykket for å håndtere bilder med utvidelsesnavn med store bokstaver.
Det er ikke nok å sjekke utvidelsesnavnet alene, siden utvidelsesnavn enkelt kan redigeres. For å sikre at kun bilder lastes opp, må du sjekke MIME-type også. Du kan få tilgang til en fil mimetype eiendom gjennom file.mimetype. Så du sjekker for mimetype eiendom ved hjelp av test metode som du gjorde for utvidelsesnavnene.
Hvis de to betingelsene returnerer sanne, returnerer du tilbakeringingen med null og sant, eller du returnerer tilbakeringingen med en feil.
Til slutt legger du til filfilter eiendom til multer-konfigurasjonen.
konst last opp = multer({
lagring: storageEngine,
grenser: { filstørrelse: 10000000 },
filFilter: (req, fil, cb) => {
checkFileType (fil, cb);
},
});
Trinn 4: Bruke Multer som en Express Middleware
Deretter må du implementere rutebehandlere som håndterer bildeopplastingene.
Multer kan håndtere både enkelt og flere bildeopplastinger avhengig av konfigurasjonen.
Legg til kodeblokken nedenfor til din app.js fil for å lage en rutebehandler for enkeltbildeopplastinger:
app.post("/single", upload.single("bilde"), (req, res) => {
hvis (rekv.fil) {
res.send("Enkelt fil er lastet opp");
} ellers {
res.status (400).send("Last opp et gyldig bilde");
}
});
I kodeblokken ovenfor kalte du enkelt metode på laste opp variabel, som lagrer multer-konfigurasjonen. Denne metoden returnerer en mellomvare som behandler en "enkelt fil" knyttet til det gitte skjemafeltet. Så passerte du bilde som skjemafeltet.
Til slutt, sjekk om en fil ble lastet opp via rekv objekt i fil eiendom. Hvis det var det, sender du en suksessmelding, ellers sender du en feilmelding.
Legg til kodeblokken nedenfor til din app.js fil for å lage en rutebehandler for flere bildeopplastinger:
app.post("/multiple", upload.array("Bilder", 5), (req, res) => {
hvis (rekv.filer) {
res.send("Flere filer er lastet opp");
} ellers {
res.status (400).send("Last opp et gyldig bilde");
}
});
I kodeblokken ovenfor kalte du array metode på laste opp variabel, som lagrer multer-konfigurasjonen. Denne metoden tar to argumenter – et feltnavn og et maksimalt antall – og returnerer mellomvare som behandler flere filer som deler samme feltnavn. Da bestod du Bilder som delt skjemafelt og 5 som maksimalt antall bilder som kan lastes opp samtidig.
Fordeler med å bruke Multer
Å bruke Multer i dine Node.js-applikasjoner forenkler den ellers kompliserte prosessen med å laste opp og lagre bilder direkte på serveren din. Multer er også basert på busboy, en Node.js-modul for å analysere innkommende skjemadata, noe som gjør den svært effektiv for å analysere skjemadata.