使用 imgur.com API 作為應用程式上傳檔案的圖床

不知道你有沒有用過Hackmd.io這個網站中一個我覺得很讚的功能?

Hackmd.io是一個共筆的網站，你可以在瀏覽器上以markdown格式編輯文件，其中有一個挺神奇的功能，你可以透過Ctrl+v直接把剪貼簿中的圖片以貼上的方式貼入文件中，這個貼上的動作會自動變成上傳檔案，並且在上傳完成之後得到一個該圖檔的url，整個操作像是底下這樣：

好，其實要實現這個功能不難，只要你javascript夠熟，這個動作也不過是把前端的圖檔往後端傳，然後後端接收到之後，上傳到某個位置(而這某個位置就是Imgur.com)，取得該圖檔的url之後，update前端的html，就可以顯示出來了。(當然如果你願意的話，也可以整段都用js在前端完成)

但讓我好奇的是，這個imgur網站有支援開發人員免費當作圖床用嗎?

一查之下，還真的有，且API和套件都非常齊全，只要你是非商業使用，是完全免費的。即使是商業使用，也有一定額度的免費。這讓我挺訝異的，訝異的部分是我以前怎麼會錯過這個網站?

為什麼我們需要把上傳的檔案放到特定的blob或圖床上呢? 因為在雲端的時代，上傳的檔案放到Web Server上會造成系統無法實現HA，Scaling會受到限制，而放在資料庫中當然太奢侈，所以一個好的大檔案儲存位置，是開發應用程式必須的。

過去我都是用azure blob當作應用程式的上傳圖片存放位置，雖然也算是便宜，但免費的imgur還是頗吸引人，特別是在我們開發的服務並沒有收錢的時候(像是Chat bot、Demo範例…等)。

要怎麼把圖片上傳到imgur上並取得該圖片的URL呢?

程式碼超簡單：

上面這段程式碼使用到了Imgur.API這個nuget套件：

另外程式碼中的CLIENT_ID和CLIENT_SECRET當然要申請，申請的步驟也很容易，請先註冊成為imgur的會員，然後到底下這個頁面申請一個App：

https://api.imgur.com/oauth2/addclient

由於我們只是很簡單的上傳圖片取得URL，且使用的是Server Site的Code，所以我們不需要 callback URL，簡單的選擇第二項即可：

申請完之後你會得到像是底下這樣的資訊：

其中就有我們程式碼中需要的 Client ID與Secret。
(順帶一提，又一次使用OAuth的場合，如果你對OAuth不熟，可以參考一次搞懂OAuth與SSO在幹什麼?)。

OK，取得ID和Secret之後，透過上面這段C#程式碼，你可以超簡單的把圖檔上傳到imgur圖床上，並取得該圖片唯一的URL。

關於Imgur.API這個nuget套件的資訊可以參考這邊: https://imgurapi.readthedocs.io/en/latest/

至於Imgur這個網站本身的API可以參考: https://apidocs.imgur.com/