用Line機器人上傳imgur圖片教學(Express,@line/bot-sdk)

用Line機器人上傳imgur圖片教學(Express,@line/bot-sdk)封面

本篇文章雖然是Line機器人操作教學，但如何申請機器人請自己去搜尋一下，創建也自己創一下，有很多篇手把手教學

目標想達到的效果

Line機器人收到圖片後將圖片上傳至imgur雲端空間，回傳使用者圖片url

閱讀前需具備知識

• Line機器人創建設置
• Nodejs與express基礎配置
• @line/bot-sdkSDK的基本認知

步驟說明

收到line機器人訊息取得圖片訊息ID

{
  "destination": "xxxxxxxxxx",
  "events": [
    {
      "type": "message",
      "message": {
        "type": "image",
        "id": "354718705033693859",
        "contentProvider": {
          "type": "line"
        },
        "imageSet": {
          "id": "xxxxxxxxxx",
          "index": 1,
          "total": 2
        }
      },
      "timestamp": xxxxxxxxxx,
      "source": {
        "type": "user",
        "userId": "xxxxxxxxxx"
      },
      "webhookEventId": "xxxxxxxxxx",
      "deliveryContext": {
        "isRedelivery": false
      },
      "replyToken":  "xxxxxxxxxx",
      "mode": "active"
    }
  ]
}

和一般的思路不一樣的地方是Line並不是直接把圖片整張丟過來 而且需要使用Line的API詢問這張圖片是什麼

記下圖片ID即可繼續操作

參考官方文件內容官方文檔

使用Line API取得圖片訊息內容

使用Line官方提供的 getContent API 簡單解釋ㄧ下大概就是圖片、影片、音訊、檔案等等訊息都要透過這個API來取得檔案本體

直接上官方範例程式SDK

const line = require('@line/bot-sdk');

const client = new line.Client({
  channelAccessToken: '<channel access token>'
})
client.getMessageContent('<messageId>')
  .then((stream) => {
    stream.on('data', (chunk) => {
      ...
    });
    stream.on('error', (err) => {
      // error handling
    })
  })

回來的資料並不是圖檔本體 而是readable stream的資料格式

操考官方文檔Get content

處理buffer資料

readable stream大概就是資料被切分很多小塊buffer 需要把資料全部搜集好以後再一次轉換成我們需要的格式

查詢過imgur API中上傳圖片的指定格式後發現可以接受3種格式 stream, base64, url

所以預計處理方式是把buffer的資料搜集完成後全部轉換成stream的圖片格式

• 把buffer搜集起來

const buffers = []
readableBuffer.on('data', chunk => {
  buffers.push(chunk)
})

• 結束時將資料轉換成stream的格式

const { Readable } = require('stream')
readableBuffer.on('end', async () => {
  const stream = Readable.from(buffers)
})

使用imgur API上傳

最後再使用api直接上傳，初始化成imgur_client 以後繼續操作

album 是指定相簿名稱，我有事先在imgur空間建立一個自己的相簿取得ID，往後要刪除照片比較方便

const imgur_client = require('../imgur/index')
const data = await imgur_client.upload({
  image: stream,
  type: 'stream',
  album: process.env.IMGUR_ALBUM_ID
})
const link = data.data.link

成功上傳後會返回關於此次上傳的詳細資料 其中包含圖片的url位置

最後可以將url返回Line訊息即可。