Multer für JavaScript (Node.js): Komplettguide mit Beispielen

1. Was ist Multer und wofür wird es benötigt?

Multer ist eine beliebte Middleware-Bibliothek für Node.js, die speziell für die Verarbeitung von multipart/form-data entwickelt wurde – dem Format, das beim Hochladen von Dateien über HTML-Formulare verwendet wird. Im Gegensatz zum Standardmodul body-parser, das nur mit JSON und URL-kodierten Daten arbeitet, kann Multer zusammengesetzte Anfragen parsen, daraus Dateien extrahieren und diese auf dem Server speichern (im Arbeitsspeicher oder auf der Festplatte). Die Bibliothek baut auf dem Modul busboy auf und bietet eine benutzerfreundliche API zur Konfiguration von Pfaden, Dateinamen, Filterung von Dateitypen und Begrenzung der Dateigröße.

Wofür wird Multer benötigt? In jeder Webanwendung, in der ein Benutzer ein Profilbild, ein Dokument, ein Bild oder ein Video hochladen kann, muss multipart/form-data verarbeitet werden. Express.js (das beliebteste Framework für Node.js) bietet keine integrierte Unterstützung für dieses Format, daher ist Multer ein unverzichtbares Werkzeug. Es ermöglicht Entwicklern, sich auf die Geschäftslogik zu konzentrieren, anstatt sich mit dem Low-Level-Parsing von Binärdaten befassen zu müssen.

Multer unterstützt das gleichzeitige Hochladen einer oder mehrerer Dateien, die Arbeit mit Formularfeldern, die benutzerdefinierte Generierung von Dateinamen, die Filterung nach MIME-Typen und Dateiendungen sowie die Begrenzung der Größe hochgeladener Daten. Dank seiner flexiblen Konfiguration eignet sich die Bibliothek sowohl für einfache Projekte (z. B. das Hochladen von Avataren) als auch für komplexe Systeme mit Cloud-Speicherung (über benutzerdefinierte Speicher-Engines).

2. Installation

Die Installation erfolgt über npm (Node Package Manager). Stellen Sie sicher, dass Node.js (Version 12 oder höher) installiert ist.

npm install multer

Nach der Installation kann die Bibliothek in Ihr Projekt importiert werden.

3. Schnellstart – Minimales funktionierendes Beispiel

Wir erstellen einen einfachen Server mit Express.js, der das Hochladen einer einzelnen Datei über ein Formular akzeptiert und im Ordner uploads/ speichert.

Schritt 1: Projektstruktur

mkdir multer-beispiel
cd multer-beispiel
npm init -y
npm install express multer
touch index.html
touch server.js

Schritt 2: HTML-Formular (index.html)

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Datei hochladen</title>
</head>
<body>
    <h1>Laden Sie eine Datei hoch</h1>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="myFile" required>
        <button type="submit">Absenden</button>
    </form>
</body>
</html>

Schritt 3: Server (server.js)

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const PORT = 3000;

// Multer-Konfiguration: Dateien werden im Ordner 'uploads/' gespeichert
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/');
    },
    filename: (req, file, cb) => {
        // Eindeutigen Dateinamen generieren: aktuelles Datum + zufällige Zahl + Originalendung
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, uniqueSuffix + path.extname(file.originalname));
    }
});

const upload = multer({ storage: storage });

// Statisches HTML ausliefern
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

// Datei-Upload verarbeiten
app.post('/upload', upload.single('myFile'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('Keine Datei hochgeladen.');
    }
    res.send(`Datei "${req.file.originalname}" erfolgreich hochgeladen. Größe: ${req.file.size} Bytes.`);
});

app.listen(PORT, () => {
    console.log(`Server läuft auf http://localhost:${PORT}`);
});

Schritt 4: Server starten und testen

Führen Sie den Server aus und öffnen Sie http://localhost:3000 im Browser.

node server.js

Wählen Sie eine Datei aus und klicken Sie auf "Absenden". Die Datei wird im Ordner uploads/ gespeichert und Sie erhalten eine Erfolgsmeldung mit dem Dateinamen und der Größe.