[API] 串接 Imgur API 圖床服務，上傳到指定相簿

發表於 閱讀次數：

圖片是網頁不可或缺的元素，Github pages 不適合放入大量圖片，放到自己的雲端空間也不方便使用，免費的圖床服務就是很好的解決方案，imgur 非常多人使用（也是迷因圖的量產地），一開始參考了網路上的中文教學，發現有些操作已經變了，才有了這篇記錄目前的作法。

Imgur API Doc

Imgur API 的文件很詳細，是一個便利的操作介面，面板大致分四個區塊：

  • 上方 header：可以內容排版是單欄或雙欄，最重要的是選擇範例程式碼的語言種類。
  • 左側選單：選擇要查看的資訊類型，通常會用到的是 image。
  • 中間區塊：顯示文件資訊。
  • 右側區塊：顯示範例程式碼。

Imgur

註冊 Imgur API 及取得授權

以下步驟參考 官方文件 簡略翻譯（圖片使用官方文件的）：

  1. 事前準備

    • 安裝 Postman
    • 點擊官方文件最右上角的按鈕（Run in Postman）下載寫好的 postman 檔案，執行並 import 至 Postman 中。

  2. 前往 註冊 API 頁面 申請（要先有 Imgur 的帳號）

    • Application name：自己取名
    • Authorization type：選第一個
    • Authorization callback URL：填入官方文件提供的網址
      https://www.getpostman.com/oauth2/callback
    • 除了信箱，其他可以不填，點擊 submit 送出。
    • 送出後取得 Client ID 和 Client secret，請務必把它記下來。

  3. 開啟 Postman（Postman 的介面隨著版本更新一直有變化，以下步驟都需要自行找到對應位置）。

  4. 點擊步驟 1 匯入的 Imgur API，找到 Auth 頁面中的 Type 選單，選擇「OAuth 2.0」。

  5. 拉到最底下，點擊「Get New Access Token」。

  6. 接下來會進入登入畫面，登入之後很有可能拿到 429 錯誤，需要等一段時間再嘗試（這段很浪費時間）。

    1
    {"data":{"error":"Too Many Requests","request":"\/oauth2\/authorize","method":"POST"},"success":false,"status":429}

  7. 上個步驟如果成功，就會取得一個 refresh token，這個 token 一定要記下來，攸關你的 API 能用多久。

  8. Postman 選單切換到 Environment，新增一個 ImgurAPI 的環境變數集合，並且在裡面加入前面取得的 refreshToken、clientId、clientSecret。

  9. 回到 API Collections，選擇 Imgur API > Account > Generate Access Token，並且設定環境變數使用上個步驟設定的 ImgurAPI 環境（選項應該會在介面右上方）。

  10. 送出後就會取得 Access Token 了，這個 Token 的有效時間大約是一個月，當 Access Token 過期時，需要重新執行一次「Generate Access Token」來取得新的 Access Token，所以 refreshToken、clientId、clientSecret 這三個千萬別弄丟了。

  11. 補充：取得 Access Token 時會自動加入到設定好的環境變數中，可以直接使用 Postman 測試其他的功能，不需要再額外設定 headers authentication。

Imgur API 操作

Headers 權限

使用 Imgur API 時需要傳入 Authorization Headers，分別有兩種不同模式：

  • 匿名用戶： {"Authorization", "Client-ID {{clientId}}"}
  • 登入用戶：{"Authorization", "Bearer {{Access Token}}"}

使用匿名上傳的圖片不會出現在自己帳戶底下，一定得記住 response 給的網址，遺失了就找不到這張圖。

使用登入用戶來上傳圖片較可靠，也可以指定自己帳戶內的相簿來分類。

上傳圖片

上傳圖片的 API 可以參考 官方文件的 Image。

文件寫的路徑是 https://api.imgur.com/3/upload
範例程式碼卻是 https://api.imgur.com/3/image
實測目前兩個都可以用….

官方範例程式 headers 都是使用匿名，建議替換成 Access Token。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// axios 的範例（官網也有 fetch、jquery 和 XMLHttpRequest 版本）
const data = new FormData();
data.append('image', 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');

const config = {
  method: 'post',
  url: 'https://api.imgur.com/3/upload',
  headers: { 
     // 具名 (2選1)
    'Authorization': 'Bearer {{Access Token}}',
     // 匿名 (2選1)
    'Authorization': 'Client-ID {{clientId}}', 
    ...data.getHeaders()
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

上傳圖片到指定相簿

上傳圖片到指定相簿需要有相簿的 Hash，可以透過 API 建立相簿（官方網站抓的那包 Postman collection 有所有的 API），或是用網頁操作，流程如下：

  1. 登入 imgur 網頁。
  2. 進入 images 頁面新增一個要上傳的相簿。
  3. 點選右上選單，選擇 posts (或是直接點頭像也會到 posts)
  4. 在 posts 列表中點選要上傳的相簿。
  5. 網址會變成 https://imgur.com/a/xxxxxxx，其中 xxxxxxx 就是相簿的專屬 Hash

取得 Hash 後使用在 FormData 裡面加入即可。
（Authentication 需要傳 Access Token 才有權限）

1
data.append('album', 'xxxxxxx')