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

# 🏅 Day 33 - Imgur 串接

延續前一天每日任務，使用 multer 將接收到的 form data 處理，在此過程若有出現錯誤，可以透過以下處理 multer 相關錯誤，若無錯誤則可進行 Imgur 串接

請先參考此 [Express Imgur 套件上傳教學](https://israynotarray.com/nodejs/20220517/432259079/)

**範例**（完整範例可觀看 [GitHub](https://github.com/gonsakon/express-week4-sample/tree/week7)）

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

//  routes/upload.js
const imgur = require('imgur');
const sizeOf = require('image-size');
const upload = require('../service/image');
const { ImgurClient } = require('imgur');

router.post('/', function(req, res, next) {

  upload(req, res, async () => {
    // 若上傳檔案不符或沒有成功上傳，回傳錯誤訊息
    if(!req.files.length) {
      return res.status(400).send({
        message: '尚未上傳檔案。'
      });
    }
   // 檢測圖片尺寸
    const dimensions = sizeOf(req.files[0].buffer);
    if(dimensions.width !== dimensions.height) {
      return res.status(400).send({
        message: '圖片長寬不符合 1:1 尺寸。'
      });
    }
   // 加入申請好的 imgur client 資訊
    const client = new ImgurClient({
      clientId: process.env.IMGUR_CLIENTID,
      clientSecret: process.env.IMGUR_CLIENT_SECRET,
      refreshToken: process.env.IMGUR_REFRESH_TOKEN,
    });
    // 將 buffer 編碼為 base64 格式並上傳至指定好的 imgur 相簿
    const response = await client.upload({
      image: req.files[0].buffer.toString('base64'),
      type: 'base64',
      album: process.env.IMGUR_ALBUM_ID
    });
    // 回傳圖片 url
    res.send({ url: response.data.link });

  })

});

（21 - 26 行）以設計稿的[修改個人資料頁面](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/c328cf8f-1de3-4de6-b944-245959af7dd0/specs/)（上傳大頭照）為例，需符合
- 圖片比例 1:1
- 解析度寬度至少 300 像素以上

可以使用 [image-size](https://github.com/image-size/image-size#image-size) 套件取得圖片尺寸相關資訊驗證圖片是否符合比例及最小寬度

（27 - 32 行）串接 Imgur 前，參考 [Express Imgur 套件上傳教學](https://israynotarray.com/nodejs/20220517/432259079/)，註冊 Imgur app 並取得 client Id、client secret、refresh token，加入環境變數中

### 參考資源
- [image-size](https://github.com/image-size/image-size#image-size)
- 範例中使用到 imgur 套件的 [new ImgurClient()](https://github.com/keneucker/imgur#import-and-instantiate-with-credentials) 、[upload()](https://github.com/keneucker/imgur#upload-one-or-more-images-and-videos) 介紹
若是使用 imgur@2.2.0 需另外安裝 [tslib](https://www.npmjs.com/package/tslib)

### 題目

參考上方範例實作**串接 Imgur**
- 需驗證 解析度寬度至少 300 像素以上、圖片長寬比例需符合 1:1 尺寸
- 註冊 Imgur App、取得 refresh token
- 以 POSTMAN 測試可成功回傳圖片網址，並有成功上傳至自己的 Imgur 相簿

***此題目可自行練習，不需回報**

<!-- ## 回報流程

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

 -->

<!-- 解答：
解答與範例相同
-->

<!--
回報區
---

| 報數 | 組別／Discord 名字 | Codepen／HackMD／其他回饋 |
|:----:|:-----------------------:|:-------------------------------------------------------------------------:|
| 1 | ... | ... | -->