ในโลกของการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ การส่งข้อมูลไม่ได้จำกัดอยู่แค่การแลกเปลี่ยน JSON object ธรรมดาอีกต่อไป ระบบส่วนใหญ่จำเป็นต้องรองรับการอัปโหลดไฟล์ประเภทต่างๆ ไม่ว่าจะเป็นรูปภาพ เอกสาร หรือวิดีโอ ซึ่งทำให้เกิดความซับซ้อนในการจัดการ Payload ที่แตกต่างจากรูปแบบข้อความทั่วไป
เมื่อเราต้องการส่งข้อมูลที่ประกอบด้วยทั้งค่าข้อความ (Text Fields) และไฟล์ไบนารี (Binary Files) ไปยัง Backend API ที่ใช้ PostgreSQL เป็นฐานข้อมูลหลัก เราไม่สามารถใช้ JSON payload แบบปกติได้ เนื่องจากรูปแบบการรับส่งข้อมูลจะต้องเป็นมาตรฐานที่เรียกว่า multipart/form-data
⚙️ หลักการทำงาน: Axios, FormData และ Multipart/form-data
การทำงานร่วมกันระหว่าง Axios และ FormData คือหัวใจหลักของการส่งข้อมูลประเภทนี้ โดย FormData ทำหน้าที่จัดระเบียบข้อมูลให้มีโครงสร้างแบบ Form Submission ทำให้เราสามารถแนบไฟล์และค่าตัวแปรต่างๆ เข้าไปใน Request เดียวได้อย่างราบรื่น
ในส่วนของ Backend (เช่น Node.js/Express) เมื่อได้รับ Request นี้ ข้อมูลจะถูกแยกออกมาเป็นส่วนๆ และเราจะใช้ PostgreSQL ในการรับและจัดเก็บข้อมูลที่ถูกแยกเหล่านั้น
💻 ตัวอย่างโค้ด: การส่งข้อมูลจาก Client (JavaScript)
เราใช้ JavaScript เพื่อรวบรวมข้อมูลและส่งไปยัง Endpoint ของ API:
JavaScript
// 1. เตรียม FormData object<br>const formData = new FormData();<br>// 2. เพิ่มค่าข้อความ<br>formData.append('product_name', 'Laptop X');<br>formData.append('tags', 'electronics,computer');<br>// 3. เพิ่มไฟล์ (สมมติว่า fileInput คือ <input type="file">)<br>const fileInput = document.getElementById('fileUpload');<br>if (fileInput.files.length > 0) {<br> formData.append('product_image', fileInput.files[0]);<br>}
// 4. ส่งข้อมูลด้วย Axios<br>axios.post('http://api.yourdomain.com/products', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
}) .then(response => {
console.log('Upload Success:', response.data);
});
💾 การประมวลผลข้อมูลที่ Backend (PostgreSQL Focus)
เมื่อ Backend ได้รับ multipart/form-data แล้ว จะทำการแยกข้อมูลออกเป็นส่วนๆ และนำไปบันทึกใน PostgreSQL โดยเราสามารถใช้คุณสมบัติของ PostgreSQL เช่น การจัดเก็บไฟล์ไบนารี (BLOB) หรือการจัดการข้อมูลแบบ Array ได้
ตัวอย่างการบันทึกข้อมูลใน PostgreSQL
สมมติว่าเราได้รับชื่อสินค้า (Text), แท็ก (Comma-separated string), และไฟล์รูปภาพ (Binary Data) เราจะดำเนินการดังนี้:
SQL
-- 1. ตรวจสอบและเตรียมข้อมูล<br>-- สมมติว่า file_path คือที่เก็บไฟล์ที่ถูกอัปโหลดแล้ว<br>-- และ product_name, tags คือค่าที่ส่งมา<br>
-- 2. การบันทึกข้อมูลหลัก (Product Table)<br>INSERT INTO products (name, tags, image_path, uploaded_at) VALUES<br>('Laptop X', 'electronics,computer', 'uploads/laptop_x.jpg', NOW());
-- 3. การบันทึกข้อมูลไฟล์ไบนารี (ถ้าต้องการเก็บ BLOB ใน DB โดยตรง)<br>-- สมมติว่า 'binary_data' คือ Buffer ที่ได้รับจาก Request<br>INSERT INTO product_images (product_id, image_data) VALUES<br>(101, :binary_data::bytea);
✅ บทสรุป: การผสานพลังของเทคโนโลยี
การส่ง Form Data และ File Upload ที่ซับซ้อนต้องอาศัยความเข้าใจในหลายส่วน ตั้งแต่การจัดโครงสร้างข้อมูลด้วย FormData ที่ฝั่ง Client ไปจนถึงการจัดการ Request Body ที่ Backend และการใช้ความสามารถของฐานข้อมูลอย่าง PostgreSQL ในการจัดเก็บข้อมูลที่หลากหลายได้อย่างมีประสิทธิภาพ การทำความเข้าใจ Workflow เหล่านี้จะช่วยให้คุณสร้าง Web Application ที่มีความเสถียรและรองรับการใช้งานไฟล์ขนาดใหญ่ได้อย่างสมบูรณ์