紀錄 imgur 如何上傳圖片到自己的相簿

此為不負責任教學，介面操作依實際情況而有所異動

額外資源參考

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

israynotarray超完整 Express Imgur 套件上傳教學

[前端筆記] 用 axios 串接 imgur API上傳圖片

步驟

• 安裝 Postman
• 進入寫好的 API文件 ，並點擊右上角 " run in postman "

• 接下來會跳出選擇開啟方式，這邊先選 " for Web "

• 選擇要匯入的工作區

• 有成功會進來會出現在工作區內

註冊

• 先建立 Imgur 帳號
• 進入 註冊 API 頁面 申請（要先有 Imgur 的帳號）
• 填寫 Application name（自取）
• Authorization callback URL 填官方文件給的網址https://www.getpostman.com/oauth2/callback

• 選擇第一個 OAuth 2 authorization with a callback URL 並輸入信箱（收通知用）

• 送出後把上面的 Client ID / Client secret 記下來

設定 postman

• 打開該匯入的 Imgur API
• 找到 Image Uplod

• 找到 type 選擇 OAuth 2.0

• 右側往下把資料填寫完整
• Token Name(自取)
• Callback URL ( 填 https://www.getpostman.com/oauth2/callback )
• Auth URL ( 填 https://api.imgur.com/oauth2/authorize )
• Access Token URL ( 填 https://api.imgur.com/oauth2/token )
• Client ID ( 剛剛記下來的 )
• Client Secret ( 剛剛記下來的 )

PS. 如果忘記 Client ID / Client Secret
可以到 Imgur登入後 -> setting -> Applications

全部填寫完之後，就可以往下找到 " Get New Access Token"

如果失敗可以梢等再試試，建議不要用第三方登入，如果一直失敗則去密碼找回重新設定個。

送出並同意授權後，會出現一個燈箱，請全部記好!!!

postman 有 API 需要使用的話，可以設定

回到VSCODE

• 圖片上傳的路徑為 : https://api.imgur.com/3/image
• 指定某個相簿 :

formData.append(‘album’, ‘GyuOpeD’)
通常網址為 https://imgur.com/a/XXXXXX
XXXXXX 為相簿 HashId

• headers 帶 Authorization ，這邊的 Authorization 為剛剛postman最後設定出現燈箱上的

// file選取圖片 及 送出按紐
<input type="file" name="file" ref="file" @change="handleFileUpload" />
<button type="button" @click="postImage">測試上傳圖片</button>

// VUE
handleFileUpload () {
  this.file = this.$refs.file.files[0]
},
async postImage () {
  const formData = new FormData()
  formData.append('image', this.file) // 圖片
  formData.append('album', 'GyuOpeD') // 相簿HashId

  this.$http
    .post('https://api.imgur.com/3/image', formData, {
      headers: {
        Authorization: ' Bearer "最後postman燈箱上的Access Token" '
      }
    })
    .then((data) => {
      console.log(data)
    })
    .catch((error) => console.log(error))
}

• joker
• 2024/04/25