Inhalte ausliefern

Liefere statische Dateien aus, verarbeite HTML-Formulare und nimm einfache Uploads mit multer entgegen.

9 Min. · 3 Fragen

Eine API gibt nicht nur JSON zurück. HTML-Seiten, Bilder, Stylesheets, ein Frontend-Build: Express liefert das alles mit einer einzigen Middleware aus, express.static. Jede Datei im Ordner wird unter der passenden URL erreichbar: public/logo.png antwortet auf /logo.png.

import express from "express";

const app = express();

app.use(express.static("public"));

app.listen(3000, () => {
  console.log("http://localhost:3000");
});

Kommen wir zu den Formularen. Ein klassisches HTML-Formular sendet seine Felder im Format application/x-www-form-urlencoded. Die Middleware express.urlencoded dekodiert sie und füllt req.body, genau wie express.json es für JSON tut. Lege in public/ eine Seite mit einem Formular ab, dessen method auf POST und dessen action auf /contact gesetzt ist, und verarbeite dann das Absenden:

app.use(express.urlencoded({ extended: true }));

app.post("/contact", (req, res) => {
  const { name, message } = req.body;
  if (!name || !message) {
    return res.status(400).send("Required fields");
  }
  res.send("Thank you " + name + ", message received.");
});

Um eine Datei zu senden, muss das Formular enctype mit dem Wert multipart/form-data deklarieren und ein input-Feld vom Typ file enthalten, das zum Beispiel avatar heißt. Express kann dieses Format nicht allein dekodieren: Die Referenz-Middleware dafür ist multer.

npm install multer

import multer from "multer";

const upload = multer({
  dest: "uploads/",
  limits: { fileSize: 2 * 1024 * 1024 }
});

app.post(
  "/avatar",
  upload.single("avatar"),
  (req, res) => {
    if (!req.file) {
      return res.status(400).json({
        error: "No file received"
      });
    }
    res.status(201).json({
      name: req.file.filename,
      size: req.file.size
    });
  }
);

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was macht express.static, wenn es auf den Ordner public angewendet wird?
   • Es liefert jede Datei des Ordners unter der passenden URL aus
   • Es kompiliert die Dateien des Ordners beim Start
   • Es schützt den Ordner mit einem Passwort
2. Welche Middleware füllt req.body bei einem klassischen HTML-Formular?
   • express.json()
   • express.urlencoded()
   • express.static()
3. Welches Attribut muss das Formular tragen, um eine Datei zu senden?
   • method auf GET gesetzt
   • enctype auf multipart/form-data gesetzt
   • target auf _blank gesetzt