Раздача контента

Раздавай статические файлы, обрабатывай HTML-формы и принимай простые загрузки файлов с помощью multer.

9 мин · 3 вопросов

API возвращает не только JSON. HTML-страницы, картинки, таблицы стилей, собранный фронтенд: всё это Express раздаёт одним-единственным middleware - express.static. Каждый файл в папке становится доступен по соответствующему URL: public/logo.png отвечает на /logo.png.

import express from "express";

const app = express();

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

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

Перейдём к формам. Классическая HTML-форма отправляет свои поля в формате application/x-www-form-urlencoded. Middleware express.urlencoded декодирует их и заполняет req.body - ровно так же, как express.json делает это для JSON. Положи в public/ страницу с формой, у которой method равен POST, а action - /contact, затем обработай отправку:

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

Чтобы отправить файл, форма должна объявить enctype со значением multipart/form-data и содержать поле input типа file, названное, например, avatar. Сам по себе Express этот формат декодировать не умеет: эталонный middleware здесь - 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
    });
  }
);

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Что делает express.static, применённый к папке public?
   • Раздаёт каждый файл из папки по соответствующему URL
   • Компилирует файлы папки при старте
   • Защищает папку паролем
2. Какой middleware заполняет req.body для классической HTML-формы?
   • express.json()
   • express.urlencoded()
   • express.static()
3. Какой атрибут должна нести форма, чтобы отправить файл?
   • method со значением GET
   • enctype со значением multipart/form-data
   • target со значением _blank