コンテンツを配信する

静的ファイルを配信し、HTMLフォームを処理し、multerで簡単なアップロードを受け付けましょう。

9 分 · 3 問

APIはJSONだけを返すわけではありません。HTMLページ、画像、スタイルシート、フロントエンドのビルド。Expressはそのすべてを、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形式で送ります。express.urlencodedミドルウェアはそれらをデコードしてreq.bodyを埋めます。express.jsonがJSONに対してするのとまったく同じです。methodをPOSTに、actionを/contactに設定したフォームを含むページをpublic/に置き、それから送信を処理しましょう。

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を宣言し、たとえばavatarという名前のfile型のinputフィールドを含む必要があります。Expressはこの形式を単独ではデコードできません。定番のミドルウェアが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. publicフォルダーに適用したとき、express.staticは何をしますか？
   • フォルダー内の各ファイルを、対応するURLで配信する
   • 起動時にフォルダーのファイルをコンパイルする
   • フォルダーをパスワードで保護する
2. 昔ながらのHTMLフォームでreq.bodyを埋めるミドルウェアはどれですか？
   • express.json()
   • express.urlencoded()
   • express.static()
3. ファイルを送るために、フォームはどの属性を持つ必要がありますか？
   • GETに設定されたmethod
   • multipart/form-dataに設定されたenctype
   • _blankに設定されたtarget