การอัปโหลดไฟล์เป็นฟีเจอร์ที่พบได้บ่อยใน Web Application เช่น
การอัปโหลดรูปภาพ โปรไฟล์ผู้ใช้ เอกสาร หรือไฟล์ต่าง ๆ
ใน Node.js นิยมใช้ library ชื่อ multer เพื่อช่วยจัดการการรับไฟล์จาก HTTP request
ซึ่งทำงานร่วมกับ Express.js ได้อย่างง่ายและมีประสิทธิภาพ
1. ติดตั้ง Package ที่จำเป็น
เริ่มต้นด้วยการติดตั้ง Express และ Multer
npm install express multer
Express ใช้สำหรับสร้าง Web Server
และ Multer ใช้สำหรับจัดการไฟล์ที่ถูกอัปโหลดผ่าน form
2. สร้างโฟลเดอร์สำหรับเก็บไฟล์
ภายในโปรเจกต์ให้สร้างโฟลเดอร์สำหรับเก็บไฟล์ เช่น
uploads/
ไฟล์ที่ผู้ใช้อัปโหลดจะถูกเก็บไว้ในโฟลเดอร์นี้
3. สร้าง Server สำหรับรับไฟล์
สร้างไฟล์ชื่อ server.js
const express = require('express');
const multer = require('multer');
const app = express();const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
const uniqueName = Date.now() + '-' + file.originalname;
cb(null, uniqueName);
}
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('file'), (req, res) => {
res.json({
message: 'Upload success',
file: req.file
});
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
4. ตัวอย่าง HTML สำหรับอัปโหลดไฟล์
สามารถสร้างฟอร์ม HTML สำหรับทดสอบการอัปโหลดไฟล์ได้ดังนี้
<form action="http://localhost:3000/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Upload</button>
</form>
เมื่อผู้ใช้เลือกไฟล์และกด Upload ไฟล์จะถูกส่งไปยัง endpoint /upload
และถูกบันทึกไว้ในโฟลเดอร์ uploads
5. การจำกัดประเภทไฟล์
บางระบบต้องการอนุญาตเฉพาะไฟล์บางประเภท เช่น รูปภาพ
สามารถกำหนด filter ได้ดังนี้
const fileFilter = (req, file, cb) => {
if (file.mimetype === 'image/png' || file.mimetype === 'image/jpeg') {
cb(null, true);
} else {
cb(new Error('Only images allowed'), false);
}
};const upload = multer({
storage: storage,
fileFilter: fileFilter
});
6. การอัปโหลดหลายไฟล์
ถ้าต้องการอัปโหลดหลายไฟล์ สามารถใช้คำสั่ง upload.array()
app.post('/uploads', upload.array('files', 5), (req, res) => {
res.json({
message: 'Multiple files uploaded',
files: req.files
});
});
ตัวเลข 5 หมายถึงจำนวนไฟล์สูงสุดที่อนุญาต
ตัวอย่างการใช้งานจริง
- อัปโหลดรูปโปรไฟล์ผู้ใช้
- อัปโหลดเอกสาร PDF
- อัปโหลดรูปสินค้าในระบบ E-commerce
- ระบบแนบไฟล์ในแชตหรือระบบ ticket
สรุป
การอัปโหลดไฟล์ใน Node.js สามารถทำได้ง่ายโดยใช้ Express ร่วมกับ librarymulter ซึ่งช่วยจัดการไฟล์จาก HTTP request และบันทึกลงในเซิร์ฟเวอร์
ได้อย่างสะดวก นอกจากนี้ยังสามารถกำหนดตำแหน่งจัดเก็บไฟล์
จำกัดประเภทไฟล์ และรองรับการอัปโหลดหลายไฟล์ในครั้งเดียว
ทำให้สามารถพัฒนาฟีเจอร์อัปโหลดไฟล์ใน Web Application ได้อย่างมีประสิทธิภาพ
