ทำระบบอัพโหลดไฟล์ด้วย Node.js

Chai Phonbopit

Software Engineer & Blogger

20 March 2015

In

บทความนี้จะพูดถึงตัวอย่างการทำไฟล์อัพโหลดด้วยการใช้ Node.js + Express.js ร่วมกับ Middleware ของ Express.js ด้วย Multer สำหรับบทความนี้จะมีเทคโนโลยีที่เกี่ยวข้องดังนี้

  • Node.js
  • Express.js
  • Multer

Step 1 : Create Project

เริ่มต้นทำการสร้างโฟลเดอร์ขึ้นมาใหม่ จากนั้นสร้างไฟล์ package.json ขึ้นมา (หรือจะใช้คำสั่ง npm init ก็ได้)

mkdir file-upload
cd file-upload
touch package.json

ที่ไฟล์ package.json ตั้งชื่อโปรเจ็คและกำหนดเวอร์ชัน ผมกำหนดไว้แบบนี้

{
"name": "file-upload",
"version": "0.0.1"
}

ต่อมาติดตั้ง dependencies ที่จะใช้ คือ express และ multer

npm install express multer --save-dev

ไฟล์ package.json หลังจากที่ติดตั้ง dependencies เรียบร้อยแล้วจะได้ดังนี้

{
"name": "file-upload",
"version": "0.0.1",
"devDependencies": {
"express": "^4.12.3",
"multer": "^0.1.8"
}
}

Step 2 : index.html

ต่อมาทำการสร้างไฟล์ index.html ขึ้นมา ในส่วนนี้จะไม่ใช้ Template Engine เช่น Jade นะครับ เพราะว่าเป็นแค่ไฟล์อัพโหลดธรรมดา หน้าตา index.html ก็มีแค่นี้เอง

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sample File Upload</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" value="Upload" />
</form>
</body>
</html>

กำหนด form ไปที่ /upload แบบ POST และกำหนดเป็น enctype="multipart/form-data" โดยในส่วนไฟล์อัพโหลด เราจะใช้ input เป็นแบบ file

Step 3 : server.js

ต่อมาในส่วน server.js ทำการเขียนโค๊ดเพื่อกำหนด route และรับ request & response ด้วย express.js แบบนี้

var express = require('express')
var app = express()
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html')
})
app.post('/upload', function (req, res) {
res.send(req.files)
})
app.listen(5555, function () {
console.log('App running on port 5555')
})

ทดสอบรันเซิฟเวอร์ดู

node server.js

จากนั้นเข้าเว็บ http://localhost:5555 และทำการอัพโหลดไฟล์หรือรูปภาพดู สังเกตผลลัพธ์

จะเห็นว่า ยังไม่มี result อะไรออกมา เนื่องจากตัว Express.js โดย default แล้ว มัน handle เฉพาะ urlencoded และ JSON ไม่รวม multipart ฉะนั้นต้องใช้ middleware อย่าง multer มาช่วย

Step 4 : Use multer

ที่ไฟล์ server.js ทำการ require multer เข้ามา จากนั้นเพิ่มโค๊ด

app.use(multer());

server.js จะได้เป็นแบบนี้

var express = require('express')
var multer = require('multer')
var app = express()
app.use(multer())
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html')
})
app.post('/upload', function (req, res) {
res.send(req.files)
})
app.listen(5555, function () {
console.log('App running on port 5555')
})

จากนั้นทำการ restart server อีกครั้ง ทดสอบอัพโหลดไฟล์ กด Upload ก็จะเห็นผลลัพธ์แสดงเป็นไฟล์ JSON แบบนี้

{
"file": {
"fieldname": "file",
"originalname": "sample.png",
"name": "02d6a43b22b6cd220336bc35d4e93c6b.png",
"encoding": "7bit",
"mimetype": "image/png",
"path": "/tmp/02d6a43b22b6cd220336bc35d4e93c6b.png",
"extension": "png",
"size": 3947,
"truncated": false,
"buffer": null
}
}

จะเห็นได้ว่า ไฟล์ที่เราอัพโหลด เราสามารถรู้ค่า properties ได้ อย่างเช่น

  • originalname : ชื่อไฟล์ที่เราอัพโหลด
  • name : ชื่อไฟล์หลังจากที่อัพโหลด
  • mimetype : ชนิดของไฟล์
  • path : location ที่เก็บไฟล์หลักจากถูกอัพโหลด (default น่าจะถูกเก็บไว้ที่ temp)
  • extension : นามสกุลไฟล์

ที่นี้เราจะทำอะไรกับไฟล์ที่อัพโหลดก็สามารถทำได้

ถ้าเป็นระบบจริงๆ เมื่อทำการอัพโหลดไฟล์ควรจะกำหนดสิทธิ์ หรือลบออกจาก file system ไม่เช่นนั้น server คุณอาจจะถูก bomb จากการอัพโหลดไฟล์เข้ามาจนเซิฟเวอร์ล่มได้ :)

Step 5 : Multer Configuration

สุดท้าย เราสามารถที่จะกำหนดค่า multer ต่างๆได้ เช่น

  • เปลี่ยนชื่อไฟล์ที่อัพโหลด โดย generate ตาม timestamp
  • กำหนด path ที่เก็บไฟล์ เช่น ไว้ที่โฟลเดอร์ /uploads
  • จำกัดขนาดไฟล์ให้ไม่เกิน 1 MB

ที่ไฟล์ server.js ตรงส่วน app.use(multer()); เราสามารถส่ง object ที่ใช้กำหนดค่าได้แบบนี้

var fs = require('fs')
app.use(
multer({
dest: __dirname + '/uploads/',
rename: function (fieldname, filename) {
return Date.now()
},
limits: {
fileSize: 100000
},
onFileSizeLimit: function (file) {
console.log('Failed: ' + file.originalname + ' is limited')
fs.unlink(file.path)
}
})
)
  • dest : ไว้กำหนด location ที่เก็บไฟล์
  • rename : เปลี่ยนชื่อไฟล์ที่อัพโหลด
  • limits : ไว้กำหนด limit ต่างๆ เช่น ขนาดไฟล์ ความยาวชื่อไฟล์ เป็นต้น
  • onFileSizeLimit : ฟังค์ชันที่ทำงานเมื่อไฟล์เกินลิมิตที่กำหนด

ทีนี้เวลาอัพโหลดไฟล์ลงไปใหม่ path ที่เก็บไฟล์ ชื่อไฟล์ ก็จะถูกเปลี่ยนตามที่เรากำหนด options ไว้ครับ

สุดท้าย ไฟล์ server.js เป็นแบบนี้ครับ

var express = require('express')
var multer = require('multer')
var fs = require('fs')
var app = express()
app.use(
multer({
dest: __dirname + '/uploads/',
rename: function (fieldname, filename) {
return Date.now()
},
limits: {
fileSize: 100000
},
onFileSizeLimit: function (file) {
console.log('Failed: ' + file.originalname + ' is limited')
fs.unlink(file.path)
}
})
)
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html')
})
app.post('/upload', function (req, res) {
res.send(req.files)
})
app.listen(5555, function () {
console.log('App running on port 5555')
})

สรุป

ตัวอย่างนี้ก็เป็นการทำไฟล์อัพโหลดแบบง่ายๆ ด้วยวิธีของผมเองนะครับ ไม่ชัวร์ว่าจะเป็น Best Practice หรือเปล่า ด้วย Node.js + Express.js + Multer เท่านั้นครับ หากมีตรงไหนผิดพลาด แนะนำเพิ่มเติมได้ครับ หรือหากต้องการรายละเอียดเพิ่มเติม ก็สามารถอ่านได้ที่ references

References

  • #Node
  • #Node.js
  • #multer
  • #file upload