此為不負責任教學，介面操作依實際情況而有所異動
額外資源參考
[API] 串接 Imgur API 圖床服務，上傳到指定相簿
israynotarray超完整 Express Imgur 套件上傳教學
[前端筆記] 用 axios 串接 imgur API上傳圖片
步驟
- 接下來會跳出選擇開啟方式，這邊先選 " 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
