Servir du contenu

Servez des fichiers statiques, traitez des formulaires HTML et acceptez des uploads simples avec multer.

9 min · 3 questions

Une API ne renvoie pas que du JSON. Pages HTML, images, feuilles de style, build d'un front : Express sert tout cela avec un seul middleware, express.static. Chaque fichier du dossier devient accessible à l'URL correspondante : public/logo.png répond sur /logo.png.

import express from "express";

const app = express();

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

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

Passons aux formulaires. Un formulaire HTML classique envoie ses champs au format application/x-www-form-urlencoded. Le middleware express.urlencoded les décode et remplit req.body, exactement comme express.json pour le JSON. Placez dans public/ une page contenant un formulaire avec method réglé sur POST et action sur /contact, puis traitez la soumission :

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

app.post("/contact", (req, res) => {
  const { name, message } = req.body;
  if (!name || !message) {
    return res.status(400).send("Champs requis");
  }
  res.send("Merci " + name + ", message reçu.");
});

Pour envoyer un fichier, le formulaire doit déclarer enctype avec la valeur multipart/form-data et contenir un champ input de type file, nommé par exemple avatar. Express ne sait pas décoder ce format seul : le middleware de référence est 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: "Aucun fichier reçu"
      });
    }
    res.status(201).json({
      name: req.file.filename,
      size: req.file.size
    });
  }
);

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que fait express.static appliqué au dossier public ?
   • Il sert chaque fichier du dossier à l'URL correspondante
   • Il compile les fichiers du dossier au démarrage
   • Il protège le dossier par un mot de passe
2. Quel middleware remplit req.body pour un formulaire HTML classique ?
   • express.json()
   • express.urlencoded()
   • express.static()
3. Quel attribut le formulaire doit-il porter pour envoyer un fichier ?
   • method réglé sur GET
   • enctype réglé sur multipart/form-data
   • target réglé sur _blank