Er zijn drie belangrijke manieren om bestandsuploads in Node.js af te handelen: de afbeeldingen rechtstreeks op uw server opslaan, de afbeeldingen opslaan binaire gegevens of base64-tekenreeksgegevens toe aan uw database en het gebruik van Amazon Web Service (AWS) S3-buckets om uw afbeeldingen.
Hier leert u hoe u Multer, een Node.js-middleware, kunt gebruiken om in een paar stappen afbeeldingen rechtstreeks naar uw server te uploaden en op te slaan in Node.js-toepassingen.
Stap 1: Ontwikkelingsomgeving opzetten
De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.
Maak eerst een projectmap en ga ernaartoe door de volgende opdracht uit te voeren:
mkdir multer-tutorial
CD multiter-zelfstudie
Initialiseer vervolgens npm in uw projectdirectory door het volgende uit te voeren:
npm begin -y
Vervolgens moet u enkele afhankelijkheden installeren. De vereiste afhankelijkheden voor deze zelfstudie zijn onder andere:
- Nadrukkelijk: Express is een Node.js-framework dat een robuuste set functies biedt voor web- en mobiele applicaties. Het maakt het eenvoudiger om backend-applicaties te bouwen met Node.js.
- Multer: Multer is een express middleware die het uploaden en opslaan van afbeeldingen naar uw server vereenvoudigt.
Installeer de pakketten met de knooppuntpakketbeheerder door rennen:
npm installeren uitdrukkelijke mult
Maak vervolgens een app.js bestand in de hoofdmap van uw project en voeg het onderstaande codeblok toe om een eenvoudige Express-server te maken:
//app.js
const uitdrukken = vereisen('nadrukkelijk');
const app = uitdrukken();
const poort = proces.env. HAVEN || 3000;
app.listen (poort, ()=>{
troosten.log('App luistert op poort ${poort}`);
});
Stap 2: Multer configureren
Eerst importeren muilezel in uw app.js bestand.
const meerder = vereisen("multer");
muilezel vereist een opslag-engine die informatie bevat over de map waar de geüploade bestanden worden opgeslagen en hoe de bestanden worden genoemd.
A muilezel storage-engine wordt gemaakt door de schijfOpslag methode op de geïmporteerde muilezel moduul. Deze methode retourneert een Opslag Engine implementatie geconfigureerd om bestanden op te slaan op het lokale bestandssysteem.
Er is een configuratieobject met twee eigenschappen voor nodig: bestemming, wat een tekenreeks of functie is die specificeert waar de geüploade afbeeldingen worden opgeslagen.
Het tweede eigendom, bestandsnaam, is een functie die de namen van de geüploade bestanden bepaalt. Er zijn drie parameters nodig: aanv, bestand, en een terugbelverzoek (cb). aanv is de Expres Verzoek voorwerp, bestand is een object dat informatie bevat over het verwerkte bestand, en cb is een callback die de namen van de geüploade bestanden bepaalt. De callback-functie neemt fout en bestandsnaam als argumenten.
Voeg onderstaand codeblok toe aan uw app.js bestand om een opslag-engine te maken:
// Opslag-engine instellen
const storageEngine = multer.diskStorage({
bestemming: "./afbeeldingen",
bestandsnaam: (req, bestand, cb) => {
cb(nul, `${Datum.nu()}--${bestand.oorspronkelijke naam}`);
},
});
In het bovenstaande codeblok stelt u de bestemming eigendom aan ”./afbeeldingen”, dus de afbeeldingen worden opgeslagen in de map van uw project in een afbeeldingen map. Toen, in de callback, ben je geslaagd nul als de fout en een sjabloontekenreeks als de bestandsnaam. De sjabloontekenreeks bestaat uit een tijdstempel die wordt gegenereerd door te bellen Datum.nu() om ervoor te zorgen dat de afbeeldingsnamen altijd uniek zijn, twee koppeltekens om de bestandsnaam en het tijdstempel te scheiden, en de oorspronkelijke naam van het bestand, die toegankelijk is via de bestand voorwerp.
De resulterende tekenreeksen van deze sjabloon zien er als volgt uit: 1663080276614--voorbeeld.jpg.
Vervolgens moet u initialiseren muilezel met de opslagmotor.
Voeg onderstaand codeblok toe aan uw app.js bestand om Multer te initialiseren met de opslag-engine:
// Multer initialiseren
const uploaden = vermenigvuldigen({
opslag: opslagMotor,
});
muilezel retourneert een Multer-instantie die verschillende methoden biedt voor het genereren van middleware die geüploade bestanden verwerkt multipart/form-data formaat.
In het codeblok hierboven geef je een configuratieobject door met een opslag eigenschap ingesteld op opslagMotor, de opslag-engine die u eerder hebt gemaakt.
Momenteel is uw Multer-configuratie voltooid, maar er zijn geen validatieregels die ervoor zorgen dat alleen afbeeldingen op uw server kunnen worden opgeslagen.
Stap 3: Regels voor afbeeldingsvalidatie toevoegen
De eerste validatieregel die u kunt toevoegen, is de maximaal toegestane grootte voor het uploaden van een afbeelding naar uw toepassing.
Werk uw Multer-configuratieobject bij met het onderstaande codeblok:
const uploaden = vermenigvuldigen({
opslag: opslagMotor,
grenzen: { bestandsgrootte: 1000000 },
});
In het bovenstaande codeblok heb je een grenzen eigenschap toe aan het configuratieobject. Deze eigenschap is een object dat verschillende limieten voor binnenkomende gegevens specificeert. Je stelt de bestandsgrootte eigenschap, waarmee de maximale bestandsgrootte in bytes is ingesteld op 1000000, wat overeenkomt met 1 MB.
Een andere validatieregel die u kunt toevoegen, is de bestandsFilter eigenschap, een optionele functie om te bepalen welke bestanden worden geüpload. Deze functie wordt aangeroepen voor elk bestand dat wordt verwerkt. Deze functie gebruikt dezelfde parameters als de bestandsnaam functie: aanv, bestand, En cb.
Om uw code schoner en beter herbruikbaar te maken, abstraheert u alle filterlogica in een functie.
Voeg onderstaand codeblok toe aan uw app.js bestand om de logica voor het filteren van bestanden te implementeren:
const pad = vereisen("pad");
const checkFileType = functie (bestand, cb) {
//Toegestane bestandsextensies
const bestandstypen = /jpeg|jpg|png|gif|svg/;
//rekening verlenging namen
const extName = bestandstypes.test (pad.extnaam (bestand.oorspronkelijke naam).toLowerCase());
const mimeType = bestandsTypes.test (bestand.mimetype);
als (mimeType && extNaam) {
opbrengst cb(nul, WAAR);
} anders {
cb("Fout: U kunt alleen afbeeldingen uploaden!!");
}
};
De checkBestandstype functie neemt twee parameters: bestand En cb.
In het bovenstaande codeblok heb je een bestand types variabele die een regex-expressie opslaat met de toegestane afbeeldingsbestandsextensies. Vervolgens belde je de test methode op de regex-expressie.
De test methode controleert op een overeenkomst in de doorgegeven tekenreeks en retourneert WAAR of vals afhankelijk van of het een match vindt. Vervolgens geeft u de geüploade bestandsnaam door, waartoe u toegang hebt bestand.oorspronkelijke naam, in de module van het pad bijnaam methode, die de extensie van het tekenreekspad ernaar retourneert. Ten slotte koppel je de JavaScript naar kleine letters string-functie toe aan de uitdrukking om afbeeldingen met hun extensienamen in hoofdletters te verwerken.
Alleen de extensienaam controleren is niet voldoende, aangezien extensienamen eenvoudig kunnen worden bewerkt. Om ervoor te zorgen dat alleen afbeeldingen worden geüpload, moet u de Mime type te. U hebt toegang tot een bestand mime type eigendom via de bestand.mimetype. Dus, je controleert voor de mime type onroerend goed met behulp van de test methode zoals u deed voor de extensienamen.
Als de twee voorwaarden waar retourneren, retourneert u de callback met nul en waar, of u retourneert de callback met een fout.
Als laatste voeg je de bestandsFilter eigenschap toe aan uw multerconfiguratie.
const uploaden = vermenigvuldigen({
opslag: opslagMotor,
grenzen: { bestandsgrootte: 10000000 },
bestandsFilter: (req, bestand, cb) => {
checkFileType (bestand, cb);
},
});
Stap 4: Multer gebruiken als Express Middleware
Vervolgens moet u routehandlers implementeren die de uploads van afbeeldingen afhandelen.
Multer kan zowel enkele als meerdere afbeeldingen uploaden, afhankelijk van de configuratie.
Voeg onderstaand codeblok toe aan uw app.js bestand om een routehandler te maken voor het uploaden van enkele afbeeldingen:
app.post("/single", upload.single("afbeelding"), (req, res) => {
als (aanv.bestand) {
opnieuw verzenden("Eén bestand is succesvol geüpload");
} anders {
res.status (400).send("Upload een geldige afbeelding");
}
});
In het bovenstaande codeblok heb je de enkel methode op de uploaden variabele, die uw multiter-configuratie opslaat. Deze methode retourneert een middleware die een "enkel bestand" verwerkt dat is gekoppeld aan het gegeven formulierveld. Dan passeer je de afbeelding als het formulierveld.
Controleer ten slotte of een bestand is geüpload via de aanv voorwerp in de bestand eigendom. Als dat zo was, stuur je een succesbericht, anders stuur je een foutmelding.
Voeg onderstaand codeblok toe aan uw app.js bestand om een routehandler te maken voor het uploaden van meerdere afbeeldingen:
app.post("/multiple", upload.array("afbeeldingen", 5), (req, res) => {
als (aanv.bestanden) {
opnieuw verzenden("Meerdere bestanden zijn succesvol geüpload");
} anders {
res.status (400).send("Upload geldige afbeeldingen");
}
});
In het bovenstaande codeblok heb je de reeks methode op de uploaden variabele, die uw multiter-configuratie opslaat. Deze methode gebruikt twee argumenten - een veldnaam en een maximaal aantal - en retourneert middleware die meerdere bestanden verwerkt die dezelfde veldnaam delen. Dan ben je geslaagd afbeeldingen als het gedeelde formulierveld en 5 als het maximale aantal afbeeldingen dat tegelijk kan worden geüpload.
Voordelen van het gebruik van Multer
Het gebruik van Multer in uw Node.js-applicaties vereenvoudigt het anders gecompliceerde proces van het rechtstreeks uploaden en opslaan van afbeeldingen op uw server. Multer is ook gebaseerd op busboy, een Node.js-module voor het ontleden van inkomende formuliergegevens, waardoor het zeer efficiënt is voor het ontleden van formuliergegevens.