發表文章

目前顯示的是 12月, 2018的文章

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