form-data, x-www-form-urlencoded และ raw ใช้อะไรดี 🤔

Web Development

form-data, x-www-form-urlencoded และ raw ใช้อะไรดี 🤔

เวลาเราจะส่งข้อมูลผ่าน HTTP Request ก็จะเจอเจ้า 3 หน่อนี้อยู่บ่อยๆ แต่ว่า แต่ละอันมีความแตกต่างกันอย่างไรบ้าง แล้วเราควรจะใช้อันไหนดี มาดูได้ที่บทความนี้เลย

ประมาณ 1 ปีที่ผ่านมา

2 min read

โดยปกติเวลาที่เราส่งข้อมูลอะไรบางอย่างไปยัง Server อย่างเช่น ส่งข้อมูล user password เพื่อ login หรืออยากจะอัพโหลดไฟล์หรือรูปภาพไปยัง Server เราก็สามารถส่ง HTTP Request ไปยัง Server ด้วย Method แบบ POST แต่เราจะส่งข้อมูลไปในรูปแบบไหนละ ซึ่งแน่นอนว่ามีรูปแบบหลักๆอยู่ 3 แบบ หลักๆ (เท่าที่ผมใช้นะ 😉)

  • application/x-www-form-urlencoded
  • multipart/form-data
  • raw

ทีนี้เรามาดูรายละเอียดของแต่ละแบบกันดีกว่าว่าใช้งานแตกต่างกันอย่างไรบ้าง ก่อนอื่นเลยผมจะสร้าง API ขึ้นมาเพื่อทดสอบการรับ Request โดยใช้ Express.js นี่แหละ และใช้ Postman ในการส่ง Request

const express = require("express");
const bodyParser = require("body-parser");
const fs = require("fs");
const multer = require("multer");
const path = require("path");
const app = express();
const port = 4000;
 
// Middleware for parsing application/x-www-form-urlencoded data
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
 
// Middleware for parsing multipart/form-data
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });
 
// Route for handling application/x-www-form-urlencoded data
app.post("/urlencoded", (req, res) => {
  res.send({
    message: "Received application/x-www-form-urlencoded data",
    data: req.body,
  });
});
 
// Route for handling multipart/form-data
app.post("/multipart", upload.any(), (req, res, next) => {
  res.json({ message: "Successfully uploaded files" });
 
  //   write file to disk
  req.files.forEach((file) => {
    fs.writeFileSync(
      path.join(__dirname, "uploads", file.originalname),
      file.buffer
    );
  });
});
 
// Route for handling raw data
app.post("/raw", (req, res) => {
  res.send({ message: "Received raw data", data: req.body });
});
 
app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

โดยรายละเอียดของ API ที่ผมสร้างขึ้นมานั้น จะมี 3 Routes คือ

  • /urlencoded สำหรับรับข้อมูลแบบ application/x-www-form-urlencoded
  • /multipart สำหรับรับข้อมูลแบบ multipart/form-data
  • /raw สำหรับรับข้อมูลแบบ raw

ซึ่งทั้ง 3 Routes ก็ไม่มีอะไรมาก แค่ส่งข้อมูลว่าได้รับแล้ว แล้วก็ส่งข้อมูลที่ได้กลับไป แต่สำหรับ Route /multipart ผมก็เพิ่มการเขียนไฟล์ลงไปในโฟลเดอร์ uploads ด้วย

🌎 application/x-www-form-urlencoded

x-www-form-urlencoded ข้อมูลจะถูกส่งไปเป็น key กับ value

  • ตัวอย่างการใช้ Postman ส่งข้อมูลแบบ x-www-form-urlencoded โดย Key คือ name และ value คือ john
ส่งข้อมูลแบบ x-www-form-urlencoded
ส่งข้อมูลแบบ x-www-form-urlencoded

🗂️ multipart/form-data

form-data ข้อมูลจะถูกส่งไปเป็นชิ้นๆ โดยทั่วไปแล้วคนจะใช้วิธีนี้ในการอัพโหลดไฟล์ เช่น รูปภาพ เสียง และอื่นๆ

  • ตัวอย่างการใช้ Postman ส่งข้อมูลแบบ form-data
ส่งข้อมูลแบบ multipart/form-data
ส่งข้อมูลแบบ multipart/form-data
ผลลัพธ์การส่งข้อมูลแบบ multipart/form-data
ผลลัพธ์การส่งข้อมูลแบบ multipart/form-data

📄 raw

raw ตามชื่อเลย ก็คือจะส่งข้อมูลไปในรูปแบบของ string ที่เราสามารถกำหนดเองได้เลย โดยเมื่อส่งจะไม่มีการแปลงข้อมูลใดๆ ทั้งสิ้น โดยเราสามารถกำหนดรูปแบบของข้อมูลได้ ซึ่งตัว Postman รองรับรูปแบบต่อไปนี้

  • Text

  • Javascript

  • JSON

  • HTML

  • XML

  • ตัวอย่างการใช้ Postman ส่งข้อมูลแบบ raw

ส่งข้อมูลแบบ raw
ส่งข้อมูลแบบ raw

โดยทั่วไปเราก็ใช้ JSON ในการส่งแหละ แต่ถ้าเราส่งข้อมูลเป็นไฟล์ หรือรูปภาพ เราก็สามารถแปลงไฟล์เป็น base64 แล้วส่งไปในรูปแบบของ string ได้เลย แล้ว Server ก็จะแปลงกลับเป็นไฟล์ หรือรูปภาพอีกที

Reference

Tags:

API Express.js