2018年12月27日 星期四

使用 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/

Related Posts Plugin for WordPress, Blogger...

熱門文章