在LINE Bot中使用Imgur作為圖檔保存位置

先前介紹過Imgur.com可做為開發人員的圖檔上傳位置之後，就有學員們敲碗，要我們具體DEMO一下如何把Chat bot用戶上傳的照片或圖檔存到Imgur.com中。

別急，我們這不就來了嗎?

回頭先討論一下這個需求的背景，過去我們曾介紹過，在開發LINE Bot時若要抓取用戶傳來的圖檔或是照片時，由於該圖檔其實是保存在LINE的伺服器中，且有七天的保存期限，因此若我們要永久保存該圖檔，或做一些加工處理，所採用的方法是，將該圖檔(的binary資料)從LINE取得後，在我們WebHook所在的IIS伺服器上，直接複製儲存一份，然後取得該實體檔案的相對路徑轉為網址。

一般來說這樣做具體可行，但如果考量的進階一點，可能會有一些需要注意的問題，舉例來說，IIS伺服器的硬碟空間如果不足，可能就會發生意外狀況。或是，該WebHook希望能夠支援HA(High Availability)做負載平衡時，也可能會發生問題。雖然，這都是系統架構比較大的時候，才會碰到的狀況，但也不可不重視。

此外，有些圖檔根本是我們的Chat bot在跟用戶對談的過程中動態產生的，產生完後就Push/Reply給用戶，用戶看完可能根本就不打算再看一次(例如即時產生的圖表、照片…等)，這類的圖檔儲存在WebHook所在的伺服器根本浪費空間，還得定時去清理，非常不經濟。

那這樣，我們有沒有其他更好的方式處理?

其實，我們可以考慮把圖檔上傳(保存)到第三方的雲端空間，而Imgur.com正好就符合我們的需求。開發人員可以透過Imgur提供的API，把圖檔上傳到Imgur.com並取得該圖檔的URL，如此一來，我們連空間和位置都無須擔心。

具體Imgur API該怎麼使用呢? 這個部分讀者可以參考底下連結：

https://studyhost.blogspot.com/2018/12/imgurcom-api.html

在了解其API的使用方式之後，我們就來看如果要把LINE Bot從用戶收到的圖檔上傳到Imgur.com上，該怎麼做。

我們先看底下這個範例的執行結果：

你會發現最上面一開始用戶傳來一個圖檔，接著LINE Bot把該圖檔上傳到Imgur並取得URL後，將URL顯示給用戶(同時也再一次把該圖檔顯示出來)

看來很不錯，該展示的功能都出現了，怎麼實現呢? 首先，參考上面連結的貼文，你必須先申請好Imgur.com的Client ID與Secret。有了這兩個重要資訊之後，我們來看程式碼怎麼撰寫。整個範例我們放在底下GitHub位置：

https://github.com/isdaviddong/Linebot-Demo-UploadImage2imgur

我們來看主要的WebHook部分：

我們看到WebHook程式碼，一開始幾行只是抓取Web.Config中的資訊，其中包含了我們需要的Channel Access Token以及Imgur的Client ID與Secret。

接著，我們看到下圖的程式碼片段，這部分是WebHook中判斷用戶傳來的是一個圖檔時，所要進行的動作。先看下圖一的部分，主要的動作是透過Client ID與Secret建立出ImgurClient物件，我們待會要透過這個物件把圖檔上傳。

下圖標示二的地方則是透過我們的LineBotSDK取得用戶上傳來的圖檔Binary資料，並存入ByteArray物件中：

最後，上圖三的部分是透過Imgur.API提供的UploadImageStreamAsync(…)方法，把抓取到的Byte資料上傳到Imgur.com並在完成後取得其URL位置。

後面的程式碼也不複雜，下圖A的部分是建立一個TextMessage與ImgaeMsg物件，這兩個物件是要回傳給用戶的訊息，其中包含剛才我們上傳到Imgur.com的圖片的URL(image.Link)，這部分我們用TextMessage(文字訊息)物件的方式顯示。而ImageMsg這個物件則是用來顯示該圖片：

接著放入上圖B所定義的Messages集合物件，然後透過ReplyMessage(…)方法回覆(Reply)給用戶，就大功告成啦。

我們再看一次，執行的結果如下：

其實程式碼相當簡單不複雜，有興趣的開發人員可以參考Github上的範例實際製作一次。

--------------------------------------------
線上課程：https://www.udemy.com/line-bot/
電子書：https://www.pubu.com.tw/ebook/103305
LineBotSDK：https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。