---
tags: Node.js 直播班 - 2023 春季班
---

# 🏅 Day 32 - multer 處理上傳檔案

接下來第七週會製作上傳圖片功能，並實作 Imgur 串接
使用者上傳圖片 POST 請求，檔案會以 form data 的形式傳送到後端，
因此會使用到 multer 套件處理接收到的資料

Multer 為一個 node.js middleware，處理 multipart/form-data 資料，主要用於上傳檔案

**範例**

// app.js
const uploadRouter = require('./routes/upload');
app.use('/api/v1/upload', uploadRouter);

//  routes/upload.js
const multer = require('multer')
const upload = multer().any();

app.post('/', function (req, res) {
  upload(req, res, () =>  {
    // 這裡先回傳以下，接下來會串接 Imgur 將以成功處理的圖片上傳至 Imgur 相簿
    res.send({ 
      status: 'success'
    });
})

其中 `multer()` 可以加入 options 設定，這裡主要會加入 [fileFilter](https://github.com/expressjs/multer#filefilter) 及 [limits](https://github.com/expressjs/multer#limits) 限制上傳圖片檔案類型以及最大檔案容量

**範例**

//  routes/upload.js
const multer = require('multer')
const path = require('path');
const upload = multer({

  limits: {

    fileSize: 2 * 1024 * 1024,

  },

  fileFilter(req, file, cb) {

    const ext = path.extname(file.originalname).toLowerCase();
    // path.extname() 取得副檔名(如 .jpg)

    if (ext !== '.jpg' && ext !== '.png' && ext !== '.jpeg') {
    // 拒絕上傳的檔案
      cb('檔案格式錯誤，僅限上傳 jpg、jpeg 與 png 格式。');

    }
    // 接受檔案
    cb(null, true);

  },

}).any();

### 參考資源

- [Express multer](https://github.com/expressjs/multer)
- [path.extname(path)](https://nodejs.org/api/path.html#pathextnamepath)

## 題目
請參考上方範例，加入上傳圖片路由 POST `/api/v1/upload`，使用 multer 套件處理 form-data，若有上傳圖片成功則回傳成功訊息
:::spoiler POSTMAN 範例圖
選擇 `form-data` 並選擇傳送 file
:::

## 回報流程

將答案連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

// app.js
const uploadRouter = require('./routes/upload');
app.use('/api/v1/upload', uploadRouter);



//  routes/upload.js
const multer = require('multer');
const path = require('path');
const upload = multer({

  limits: {
    fileSize: 2 * 1024 * 1024,
  },

  fileFilter(req, file, cb) {
    const ext = path.extname(file.originalname).toLowerCase();
    if (ext !== '.jpg' && ext !== '.png' && ext !== '.jpeg') {
      cb('檔案格式錯誤，僅限上傳 jpg、jpeg 與 png 格式。');
    }
    cb(null, true);
  },

}).any();


app.post('/', function (req, res) {
  upload(req, res, () => {
    // 這裡先回傳以下，接下來會串接 Imgur 將以成功處理的圖片上傳至 Imgur 相簿
		res.send({ 
      status: 'success'
    });
})

-->

回報區
---

| 報數 | 組別／Discord 名字 | Codepen／HackMD／其他回饋 |
|:----:|:-----------------------:|:-------------------------------------------------------------------------:|
| 1 | 中 4 組 / jimkk159 | [HackMD - Day 32](https://hackmd.io/_txRlFG-QNesNIyfI5sgrA) |