การให้บริการเนื้อหา

ให้บริการไฟล์สแตติก จัดการแบบฟอร์ม HTML และรับการอัปโหลดอย่างง่ายด้วย multer

9 นาที · 3 คำถาม

API ไม่ได้คืนแค่ JSON เท่านั้น ทั้งหน้า HTML รูปภาพ สไตล์ชีต และไฟล์ที่บิลด์จากฝั่งหน้าบ้าน (front-end) 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 ทุกประการ วางหน้าเว็บไว้ใน 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 ไม่สามารถถอดรหัสรูปแบบนี้ได้ด้วยตัวเอง มิดเดิลแวร์มาตรฐานสำหรับงานนี้คือ 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. มิดเดิลแวร์ใดเติมค่าให้ req.body สำหรับแบบฟอร์ม HTML แบบคลาสสิก?
   • express.json()
   • express.urlencoded()
   • express.static()
3. แบบฟอร์มต้องมีแอตทริบิวต์ใดจึงจะส่งไฟล์ได้?
   • method ที่ตั้งค่าเป็น GET
   • enctype ที่ตั้งค่าเป็น multipart/form-data
   • target ที่ตั้งค่าเป็น _blank