Es gibt drei Möglichkeiten, Datei-Uploads in Node.js zu handhaben: Speichern der Bilder direkt auf Ihrem Server, Speichern der Bilder Binärdaten oder Base64-String-Daten in Ihre Datenbank und Verwenden von Amazon Web Service (AWS) S3-Buckets zum Speichern und Verwalten Ihrer Bilder.
Hier erfahren Sie, wie Sie mit Multer, einer Node.js-Middleware, in wenigen Schritten Bilder direkt auf Ihren Server in Node.js-Anwendungen hochladen und speichern.
Schritt 1: Entwicklungsumgebung einrichten
Der in diesem Projekt verwendete Code ist in a GitHub-Repository und steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.
Erstellen Sie zunächst einen Projektordner und verschieben Sie ihn, indem Sie den folgenden Befehl ausführen:
mkdir Multi-Tutorial
CD Multi-Tutorial
Als nächstes initialisieren Sie npm in Ihrem Projektverzeichnis, indem Sie Folgendes ausführen:
npm init -y
Als nächstes müssen Sie einige Abhängigkeiten installieren. Die für dieses Tutorial erforderlichen Abhängigkeiten umfassen:
- Äußern: Express ist ein Node.js-Framework das einen robusten Satz von Funktionen für Web- und mobile Anwendungen bietet. Es erleichtert das Erstellen von Backend-Anwendungen mit Node.js.
- Muller: Multer ist eine Express-Middleware, die das Hochladen und Speichern von Bildern auf Ihrem Server vereinfacht.
Installieren Sie die Pakete mit der Paketmanager des Knotens durch Laufen:
npm Installieren ausdrücken
Als nächstes erstellen Sie eine app.js Datei im Stammverzeichnis Ihres Projekts und fügen Sie den folgenden Codeblock hinzu, um einen einfachen Express-Server zu erstellen:
//app.js
konst ausdrücken = erfordern('äußern');
konst app = ausdrücken ();
konst port = process.env. HAFEN || 3000;
app.listen (Port, ()=>{
Konsole.Protokoll(`App lauscht am Port ${port}`);
});
Schritt 2: Konfiguration von Multer
Zuerst importieren Multer in deinem app.js Datei.
konst Multer = erfordern("Multer");
Multer erfordert eine Speicher-Engine, die Informationen über das Verzeichnis enthält, in dem die hochgeladenen Dateien gespeichert werden, und wie die Dateien benannt werden.
A Multer Speicher-Engine wird durch Aufrufen von erstellt Festplattenspeicher Methode auf dem importierten Multer Modul. Diese Methode gibt a zurück StorageEngine Implementierung, die zum Speichern von Dateien im lokalen Dateisystem konfiguriert ist.
Es nimmt ein Konfigurationsobjekt mit zwei Eigenschaften: Ziel, eine Zeichenfolge oder Funktion, die angibt, wo die hochgeladenen Bilder gespeichert werden.
Die zweite Eigenschaft, Dateinamen, ist eine Funktion, die die Namen der hochgeladenen Dateien ermittelt. Es braucht drei Parameter: erforderlich, Datei, und ein Rückruf (cb). erforderlich ist der Express Anfrage Objekt, Datei ist ein Objekt, das Informationen über die verarbeitete Datei enthält, und cb ist ein Callback, der die Namen der hochgeladenen Dateien bestimmt. Die Callback-Funktion nimmt Fehler und Dateiname als Argumente.
Fügen Sie den folgenden Codeblock zu Ihrer hinzu app.js Datei zum Erstellen einer Speicher-Engine:
// Speicher-Engine einstellen
konst storageEngine = multer.diskStorage({
Ziel: "./Bilder",
Dateiname: (req, Datei, cb) => {
cb(Null, `${Datum.Jetzt()}--${Datei.Originalname}`);
},
});
Im Codeblock oben setzt du die Ziel Eigenschaft zu “./Bilder“, daher werden die Bilder im Verzeichnis Ihres Projekts in einem gespeichert Bilder Ordner. Dann haben Sie beim Rückruf bestanden Null als Fehler und eine Vorlagenzeichenfolge als Dateiname. Der Template-String besteht aus einem durch Aufruf generierten Zeitstempel Datum.jetzt() um sicherzustellen, dass die Bildnamen immer eindeutig sind, zwei Bindestriche zur Trennung des Dateinamens und des Zeitstempels und der ursprüngliche Name der Datei, auf die über die zugegriffen werden kann Datei Objekt.
Die resultierenden Zeichenfolgen aus dieser Vorlage sehen folgendermaßen aus: 1663080276614--beispiel.jpg.
Als nächstes müssen Sie initialisieren Multer mit der Speicher-Engine.
Fügen Sie den folgenden Codeblock zu Ihrer hinzu app.js Datei zum Initialisieren von Multer mit der Speicher-Engine:
// Multer initialisieren
konst hochladen = Multer({
Speicher: StorageEngine,
});
Multer gibt eine Multer-Instanz zurück, die mehrere Methoden zum Generieren von Middleware bereitstellt, die hochgeladene Dateien verarbeitet multipart/form-data Format.
Im obigen Codeblock übergeben Sie ein Konfigurationsobjekt mit a Lagerung Eigenschaft gesetzt auf SpeicherEngine, die Speicher-Engine, die Sie zuvor erstellt haben.
Derzeit ist Ihre Multer-Konfiguration vollständig, aber es gibt keine Validierungsregeln, die sicherstellen, dass nur Bilder auf Ihrem Server gespeichert werden können.
Schritt 3: Bildvalidierungsregeln hinzufügen
Die erste Validierungsregel, die Sie hinzufügen können, ist die maximal zulässige Größe für ein Bild, das in Ihre Anwendung hochgeladen werden kann.
Aktualisieren Sie Ihr Multer-Konfigurationsobjekt mit dem folgenden Codeblock:
konst hochladen = Multer({
Speicher: StorageEngine,
Grenzen: { Dateigröße: 1000000 },
});
Im obigen Codeblock haben Sie a hinzugefügt Grenzen -Eigenschaft auf das Konfigurationsobjekt. Diese Eigenschaft ist ein Objekt, das verschiedene Beschränkungen für eingehende Daten angibt. Sie setzen die Dateigröße Eigenschaft, mit der die maximale Dateigröße in Bytes eingestellt wird 1000000, was 1 MB entspricht.
Eine weitere Validierungsregel, die Sie hinzufügen können, ist die Dateifilter -Eigenschaft, eine optionale Funktion, um zu steuern, welche Dateien hochgeladen werden. Diese Funktion wird für jede verarbeitete Datei aufgerufen. Diese Funktion verwendet die gleichen Parameter wie die Dateinamen Funktion: erforderlich, Datei, Und cb.
Um Ihren Code übersichtlicher und besser wiederverwendbar zu machen, abstrahieren Sie die gesamte Filterlogik in eine Funktion.
Fügen Sie den folgenden Codeblock zu Ihrer hinzu app.js file zum Implementieren der Dateifilterlogik:
konst Pfad = erfordern("Weg");
konst checkFileType = Funktion (Datei, kb) {
//Erlaubte Dateierweiterungen
konst Dateitypen = /jpeg|jpg|png|gif|svg/;
//überprüfen Verlängerung Namen
konst extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
konst mimeType = fileTypes.test (file.mimetype);
if (mimeType && Nebenname) {
zurückkehren cb(Null, WAHR);
} anders {
cb("Fehler: Sie können nur Bilder hochladen!!");
}
};
Der checkFileType Die Funktion benötigt zwei Parameter: Datei Und cb.
Im obigen Codeblock haben Sie a definiert Datentypen Variable, die einen Regex-Ausdruck mit den zulässigen Bilddateierweiterungen speichert. Als nächstes riefen Sie die an prüfen Methode für den Regex-Ausdruck.
Der prüfen Die Methode sucht nach einer Übereinstimmung in der übergebenen Zeichenfolge und gibt sie zurück WAHR oder FALSCH je nachdem, ob es eine Übereinstimmung findet. Dann übergeben Sie den Namen der hochgeladenen Datei, auf die Sie zugreifen können Datei.Originalname, in das Modul des Pfads Nebenname -Methode, die die Erweiterung des Zeichenfolgenpfads an sie zurückgibt. Schließlich verketten Sie das JavaScript zu Kleinbuchstaben string-Funktion an den Ausdruck an, um Bilder mit ihren Erweiterungsnamen in Großbuchstaben zu verarbeiten.
Das Überprüfen des Erweiterungsnamens allein reicht nicht aus, da Erweiterungsnamen einfach bearbeitet werden können. Um sicherzustellen, dass nur Bilder hochgeladen werden, müssen Sie den Haken setzen Mime Typ zu. Sie können auf eine Datei zugreifen Mime Typ Eigentum durch die file.mimetype. Sie prüfen also die Mime Typ Eigenschaft mit der prüfen Methode, wie Sie es für die Erweiterungsnamen getan haben.
Wenn die beiden Bedingungen wahr zurückgeben, geben Sie den Rückruf mit zurück Null und true, oder Sie geben den Callback mit einem Fehler zurück.
Zum Schluss fügst du die hinzu Dateifilter Eigenschaft zu Ihrer Multer-Konfiguration.
konst hochladen = Multer({
Speicher: StorageEngine,
Grenzen: { Dateigröße: 10000000 },
Dateifilter: (req, Datei, cb) => {
checkFileType (Datei, cb);
},
});
Schritt 4: Verwenden von Multer als Express-Middleware
Als Nächstes müssen Sie Route-Handler implementieren, die die Bild-Uploads verarbeiten.
Multer kann je nach Konfiguration sowohl einzelne als auch mehrere Bild-Uploads verarbeiten.
Fügen Sie den folgenden Codeblock zu Ihrer hinzu app.js Datei zum Erstellen eines Routenhandlers für das Hochladen von Einzelbildern:
app.post("/single", hochladen.single("Bild"), (req, res) => {
Wenn (erforderlich.Datei) {
res.send("Einzelne Datei erfolgreich hochgeladen");
} anders {
res.status (400).send("Bitte laden Sie ein gültiges Bild hoch");
}
});
Im obigen Codeblock haben Sie die aufgerufen einzel Methode auf der hochladen Variable, die Ihre Multer-Konfiguration speichert. Diese Methode gibt eine Middleware zurück, die eine „einzelne Datei“ verarbeitet, die dem angegebenen Formularfeld zugeordnet ist. Dann hast du die bestanden Bild als Formularfeld.
Überprüfen Sie abschließend, ob eine Datei über die hochgeladen wurde erforderlich Objekt in der Datei Eigentum. Wenn ja, senden Sie eine Erfolgsmeldung, andernfalls senden Sie eine Fehlermeldung.
Fügen Sie den folgenden Codeblock zu Ihrer hinzu app.js Datei zum Erstellen eines Routen-Handlers für das Hochladen mehrerer Bilder:
app.post("/multiple", upload.array("Bilder", 5), (req, res) => {
Wenn (erforderlich.Dateien) {
res.send("Mehrere Dateien erfolgreich hochgeladen");
} anders {
res.status (400).send("Bitte laden Sie gültige Bilder hoch");
}
});
Im obigen Codeblock haben Sie die aufgerufen Reihe Methode auf der hochladen Variable, die Ihre Multer-Konfiguration speichert. Diese Methode akzeptiert zwei Argumente – einen Feldnamen und eine maximale Anzahl – und gibt Middleware zurück, die mehrere Dateien mit demselben Feldnamen verarbeitet. Dann hast du bestanden Bilder als gemeinsames Formularfeld und 5 als maximale Anzahl von Bildern, die gleichzeitig hochgeladen werden können.
Vorteile der Verwendung von Multer
Die Verwendung von Multer in Ihren Node.js-Anwendungen vereinfacht den ansonsten komplizierten Prozess des Hochladens und Speicherns von Bildern direkt auf Ihrem Server. Multer basiert auch auf Busboy, einem Node.js-Modul zum Parsen eingehender Formulardaten, wodurch es sehr effizient zum Parsen von Formulardaten ist.