Servir contenido

Sirve archivos estáticos, gestiona formularios HTML y acepta subidas sencillas de archivos con multer.

9 min · 3 preguntas

Una API no solo devuelve JSON. Páginas HTML, imágenes, hojas de estilo, una build de front-end: Express sirve todo eso con un único middleware, express.static. Cada archivo de la carpeta se vuelve accesible en la URL correspondiente: public/logo.png responde en /logo.png.

import express from "express";

const app = express();

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

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

Pasemos a los formularios. Un formulario HTML clásico envía sus campos en el formato application/x-www-form-urlencoded. El middleware express.urlencoded los decodifica y rellena req.body, exactamente como express.json hace con el JSON. Coloca en public/ una página que contenga un formulario con method en POST y action en /contact, luego gestiona el envío:

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.");
});

Para enviar un archivo, el formulario debe declarar enctype con el valor multipart/form-data y contener un campo input de tipo file, llamado por ejemplo avatar. Express no puede decodificar este formato por sí solo: el middleware de referencia es 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
    });
  }
);

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué hace express.static cuando se aplica a la carpeta public?
   • Sirve cada archivo de la carpeta en la URL correspondiente
   • Compila los archivos de la carpeta al arrancar
   • Protege la carpeta con una contraseña
2. ¿Qué middleware rellena req.body para un formulario HTML clásico?
   • express.json()
   • express.urlencoded()
   • express.static()
3. ¿Qué atributo debe llevar el formulario para enviar un archivo?
   • method en GET
   • enctype en multipart/form-data
   • target en _blank