สร้างไฟล์อัพโหลดด้วย Node.js

วันนี้เราจะมาลองทำการอัพโหลดไฟล์ด้วย Node.js กันครับ หลายๆคนอาจจะมีปัญหาว่าเราจะทำระบบอัพโหลดไฟล์ยังไงดี บทความนี้ก็จะสอนวิธีการทำไฟล์อัพโหลดที่ง่ายที่สุดเลยทีเดียว ก่อนที่เราจะเริ่มก็จะมีสิ่งที่ต้องใช้ตามด้านล่างเลย

Requirements

1. Node.js — ภาษาที่ใช้เขียน
2. Express.js — Node.js web framework
3. Multer — ตัวช่วยให้เราทำการอัพโหลดไฟล์ง่ายขึ้น

เอาหล่ะเรามาเริ่มกันเลย

สำหรับคนที่ยังไม่มี Node.js ให้ดาวน์โหลดได้ที่นี่ หลังจากนั้นก็จะเข้าสู่การติดตั้ง Express.js, Multer โดยใช้คำสั่ง npm นั่นเอง

ติดตั้ง Express.js

npm install express --save

ติดตั้ง Express-generator เพื่อใช้ในการสร้าง Project Node.js ที่มีโครงสร้างตามที่ Express.js จัดมาให้นั่นเอง ด้วยคำสั่ง

npm install express-generator -g

หลังจากติดตั้งเสร็จแล้ว ให้เราสร้าง Project ขึ้นมาโดยใช้คำสั่ง

express my-project
**เปลี่ยน my-project เป็นชื่อ Project ที่ต้องการได้เลยนะ

เข้าไฟยังโฟลเดอร์ Project ที่เราสร้างไว้แล้วทำการ install dependency ทั้งหลาย โดยใช้คำสั่ง

npm install

หลังจาก install เสร็จแล้ว ให้ทำการ start service โดยใช้คำสั่ง

npm start 

แล้วเข้าไปที่ localhost:3000 ก็จะเห็นตามด้านล่างเป็นอันว่าเสร็จเรียบร้อย

Express
Welcome to Express

ต่อไปเราจะมาลง dependency ที่เราต้องใช้นั่นก็คือ Multer นั่นเอง วิธีการลงก็แสนจะง่าย โดยใช้คำสั่ง

npm install multer --save

หลังจากลงเสร็จแล้ว เราก็จะมาเริ่มทำระบบอัพโหลดกัน

เอาหล่ะเรามาดูโครงสร้างของไฟล์ก่อนกันก่อนว่ามีอะไรบ้าง

ในบทความนี้เราจะใช้แค่ routes directory อย่างเดียวนะ โดยให้เราเข้าไปใน routes directory แล้วก็มาลงมือเขียนกันเลย

ให้เราเปิดไฟล์ index.js และแก้ไขไฟล์ตามด้านล่าง

var express = require('express');
var router = express.Router();
var multer = require('multer') // <--- 1
var upload = multer({ dest: './uploads' }) // <--- 2
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
// <--- 3
router.post('/upload-file',upload.single('file'),function(req,res,next){
 console.log(req.file);
 res.sendStatus(200);
})
module.exports = router;

1. require dependency multer ที่เราต้องการใช้งานเพื่ออัพโหลดไฟล์
2. เซ็ต directory ที่เราต้องการอัพโหลดไฟล์เข้าไป
3. route ที่ใช้ในการอัพโหลดไฟล์ โดยในส่วนนี้เราจะใช้ middleware multer ในจัดการอัพโหลดไฟล์

— upload.single(‘file’) ตรง file เป็นการตั้งชื่อตัวแปรที่เราจะส่งไฟล์มา สามารถเปลี่ยนได้ตามความต้องการเลย

จากนั้นให้เราทำการ start service ของเราอีกทีนึงโดยใช้คำสั่ง

npm start

หลังจากนั้นให้เราทำการอัพโหลดไฟล์ไปที่ path localhost:3000/upload-file ซึ่งในที่นี้ผมจะใช้ Postman ในการอัพโหลดไฟล์ โดยมีการตั้งค่าประมาณนี้

โดยหลังจากที่ทำการอัพโหลดก็จะเป็น response เป็น OK และไฟล์ก็จะปรากฎใน directory uploads ของเรานั่นเอง

ซึงถ้าเราเข้ามาดูก็พบว่าชื่อไฟล์อ่านไม่รู้เรื่อง และไม่มีนามสกุลของไฟล์ด้วย ทีนี้เราจะทำยังไงดีหละ ลองมาดูกัน

// เพิ่มส่วนนี้เพื่อตั้งการ directory เก็บไฟล์และตั้งชื่อไฟล์
var storage = multer.diskStorage({
 destination: './uploads/',
 filename:function(req,file,cb){
   cb(null, file.originalname);
 }
});
// เปลี่ยนจากของเดิมเป็นแบบนี้
var upload = multer({
 storage: storage
})

ทำการ start service อีกครั้ง แล้วทำการอัพโหลดใหม่ก็จะได้ไฟล์ที่มีชื่อตามชื่อไฟล์ของเราแล้ว เย้

** ถ้ามีการอัพโหลดชื่อไฟล์เดิมเข้าไปก็จะเข้าไปทับตัวเดิมนะ

ซึ่งอาจจะแก้ปัญหาโดยการตั้งชื่อไฟล์เป็น unique แทนโดยใช้ dependency uuid และเติมนามสกุลเข้าไฟล์เพิ่มเข้าไปตามตัวอย่างด้านล่าง

var uuid = require('uuid'); // <--- เพิ่ม
var storage = multer.diskStorage({
 destination: './uploads/',
 filename:function(req,file,cb){
  let extension = file.originalname.split(".").pop(); // <--- เพิ่ม
  cb(null, uuid.v1()+'.'+extension); <--- เปลี่ยนเป็น
 }
});

ลอง start service และอัพโหลดอีกครั้งก็จะตามรูปด้านล่าง

อ่านมาถึงตรงนี้ก็คิดว่าบทความนี้น่าจะเป็นประโยชน์กับทุกคนนะครับ จริงๆ แล้วก็ยังมี option ในการอัพโหลดอีกมากมายเช่น อัพโหลดพร้อมกันหลายไฟล์ แล้วจะต้องทำยังไง ให้ลองไปอ่านได้ที่ Multer อันนี้ได้เลย