Node.js : การ Upload ไฟล์ด้วยมอดูล multer
Tags: node, javascript, multer
Published: 2019-10-24 04:23:06

บทความนี้จะแนะนำการเขียนสคริปต์เพื่อ Upload ไฟล์เข้าสู่ Server ด้วยมอดูล multer ซึ่งจะเป็นมอดูลหลักในการช่วยให้เรา Upload ไฟล์ต่างๆ ได้สะดวกมากขึ้น โดยขอเริ่มจากติดตั้งมอดูลที่จำเป็นต้องใช้งาน express, ejs, multer

npm i express
npm i ejs
npm i multer


สร้างโฟลเดอร์ **public** แล้วใส่ข้อมูลเกี่ยวกับ bootstrap ทั้งหมด และสร้างโฟลเดอร์ **uploads** เพื่อเก็บข้อมูลไฟล์หรือรูปภาพที่ได้ทำการอัปโหลดจากเครื่องผู้ใช้ จากนั้นสร้างฟอร์มสำหรับ Upload ไฟล์

**สคริปต์ views/upload.ejs** สร้างฟอร์มสำหรับ Upload ไฟล์ โดยกำหนดชื่อตัวแปร fileupload เพื่อนำไปใช้ในส่วนการ upload ไฟล์
```javascript
<!DOCTYPE html>
<html>
  <head>
    <title>Upload File </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
      <div class="container">
          <div class="page-header">
              <h1>Upload File</h1>
              <hr>
          </div>
          <div class="row">
            <div class="col">
              <form method="post" action="/upload" enctype="multipart/form-data">
                <div class="form-group">
                  <label for="firstname">Upload</label>
                  <input type="file" class="form-control" name="fileupload" required>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-primary">Reset</button>
              </form>
            </div>
          </div>
        </div>
        <script src="./jquery-3.2.1.slim.min.js" ></script>
        <script src="./popper.min.js" ></script>
        <script src="./bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

```

จากนั้นสร้างสคริปต์ index.js ซึ่งจะเป็นสคริปต์ในการ Upload ไฟล์ 

**สคริปต์ index.js** 
```javascript
const express = require('express')
const app = express()
app.use(express.static(__dirname + '/public'))

app.set('view engine', 'ejs')

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

const multer = require('multer')
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './public/uploads')
    },
    filename: (req, file, cb) => {
	    cb(null, 'file-' + Date.now() + '.' +
	    file.originalname.split('.')[file.originalname.split('.').length-1])}
})

const upload = multer({ storage: storage })

app.get('/', (req, res) => {
	res.render('upload')
})

app.post('/upload',upload.single('fileupload'),(req,res) => {
	res.render('show',req.file)
})

app.listen(3000, () => {
	console.log('Server Started on localhost:3000...')
})

```
จากสคริปต์ index.js เราจะต้องเรียกใช้มอดูล multer เก็บไว้ในตัวแปร multer 
จากนั้นต้องกำหนดข้อมูลที่เกี่ยวของ destination เป็นการกำหนดโฟลเดอร์สำหรับเก็บไฟล์ที่ผู้ใช้ Upload เข้ามาซึ่งในตัวอย่างนี้จะเก็บไว้ที่  /public/uploads 

filename เป็นการกำหนดชื่อไฟล์หลังจาก uploads ในตัวอย่างนี้จะกำหนดชื่อไฟล์เริ่มต้นด้วยข้อความ "file-" ต่อด้วยวันเดือนปีที่ upload และหานามสกุลไฟล์ต้นฉบับ 
 
```javascript
'file-' + Date.now() + '.' + file.originalname.split('.')[file.originalname.split('.').length-1])
```

โดยการกำหนดค่าทั้งหมดที่กล่าวมาจะเก็บไว้ในตัวแปร storage แล้วไปใช้กับมอดูล multer เก็บไว้ในตัวแปร upload 

```javascript
const upload = multer({ storage: storage })
```
จากนั้นเมื่อรันสคริปต์ก็จะแสดงหน้าฟอร์ม โดยสคริปต์จะไปเรียกใช้ไฟล์ upload.ejs ออกมา ดังภาพ
```javascript
app.get('/', (req, res) => {
	res.render('upload')
})
```
![Image01](https://www.mediafire.com/convkey/bf70/da5y5dkqqmwoywv6g.jpg)

จากนั้นหากผู้ใช้ upload ไฟล์แล้วกดปุ่ม submit ก็จะส่งมายังหน้า upload method post 
```javascript
app.post('/upload',upload.single('fileupload'),(req,res) => {
	res.render('show',req.file)
})
```
โดยเราสามารถนำตัวแปรไปใช้งานได้ เช่น filename ชื่อไฟล์ที่เรา Upload เสร็จแล้ว size ขนาดของไฟล์ originalname ชื่อไฟล์ต้นฉบับ ฯลฯ

|Key	|Description	|Note|
|-------|--------------|----|
|fieldname|	Field name specified in the form|	|
|originalname|	Name of the file on the user's computer	||
|encoding|	Encoding type of the file|	|
|mimetype|	Mime type of the file	||
|size|	Size of the file in bytes|	|
|destination|	The folder to which the file has been saved|	DiskStorage|
|filename|	The name of the file within the destination|	DiskStorage|
|path|	The full path to the uploaded file	|DiskStorage|
|buffer|	A Buffer of the entire file	|MemoryStorage|

**สคริปต์ views/show.ejs** แสดงภาพที่ upload มา
```javascript
<!DOCTYPE html>
<html>
  <head>
    <title> Upload File </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
      <div class="container">
          <div class="page-header">
              <h1>Upload File</h1>
              <hr>
          </div>
          <div class="row">
            <div class="col">
              <img src="uploads/<%=filename%>" width="250">
            </div>
          </div>
        </div>
    <script src="./jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

```
![Image02](https://www.mediafire.com/convkey/b6d3/xcjyd4vfirdu72e6g.jpg)


**สรุป**

การ upload ไฟล์ด้วยใช้มอดูล multer ในตัวอย่างนี้จะ upload ไฟล์ได้ครั้งละ 1 ไฟล์เท่านั้น ซึ่งมอดูล multer สามารถ upload ไฟล์ครั้งละหลายๆ ไฟล์ โดยสามารถเข้าไปดูรายละเอียดเพิ่มเติมได้ที่ https://www.npmjs.com/package/multer