Kodokon kodokon.com

提供内容

提供静态文件、处理 HTML 表单，并借助 multer 接收简单的文件上传。

9 分钟 · 3 题

在 Kodokon 中打开本课

一个 API 并不只返回 JSON。HTML 页面、图片、样式表、一份前端构建产物：Express 只用一个中间件 express.static 就能把这一切都提供出去。文件夹里的每个文件都能通过对应的 URL 访问到：public/logo.png 会在 /logo.png 上作出响应。

JAVASCRIPT
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 格式发送它的各个字段。express.urlencoded 中间件会解码它们并填充 req.body，就像 express.json 处理 JSON 那样。在 public/ 里放一个页面，里面有一个 method 设为 POST、action 设为 /contact 的表单，然后处理它的提交：

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

要发送一个文件，表单必须声明值为 multipart/form-data 的 enctype，并包含一个类型为 file、例如命名为 avatar 的 input 字段。Express 自己无法解码这种格式：业界标配的中间件是 multer。

BASH
npm install multer
JAVASCRIPT
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
    });
  }
);
通过 limits 属性把大小上限设为 2 MB

知识检测

确认你已牢记本课的重点内容。

  1. 当 express.static 作用于 public 文件夹时，它会做什么？
    • 它把文件夹里的每个文件都在对应的 URL 上提供出去
    • 它在启动时编译文件夹里的文件
    • 它用密码保护这个文件夹
  2. 对于一个经典的 HTML 表单，哪个中间件会填充 req.body？
    • express.json()
    • express.urlencoded()
    • express.static()
  3. 要发送一个文件，表单必须带上哪个属性？
    • 值设为 GET 的 method
    • 值设为 multipart/form-data 的 enctype
    • 值设为 _blank 的 target