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

閱讀時間約 4 分鐘
此為不負責任教學,介面操作依實際情況而有所異動

額外資源參考

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

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

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


步驟

  • 安裝 Postman
  • 進入寫好的 API文件 ,並點擊右上角 " run in postman "
raw-image
  • 接下來會跳出選擇開啟方式,這邊先選 " for Web "
raw-image
  • 選擇要匯入的工作區
raw-image
  • 有成功會進來會出現在工作區內
raw-image


註冊

  • 先建立 Imgur 帳號
  • 進入 註冊 API 頁面 申請(要先有 Imgur 的帳號)
  • 填寫 Application name(自取)
  • Authorization callback URL 填官方文件給的網址https://www.getpostman.com/oauth2/callback
  • 選擇第一個 OAuth 2 authorization with a callback URL 並輸入信箱(收通知用)
raw-image
  • 送出後把上面的 Client ID / Client secret 記下來
raw-image


設定 postman

  • 打開該匯入的 Imgur API
  • 找到 Image Uplod
raw-image
  • 找到 type 選擇 OAuth 2.0
raw-image
  • 右側往下把資料填寫完整
  • 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
raw-image

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

raw-image


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


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

raw-image


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

raw-image


回到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
avatar-img
3會員
21內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Joker Cat 的其他內容
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
我們在實作中,難免會遇到在不同組件中,卻有需求相同的資料格式,因此 mixins 可以達到我們的需求,除了 data 以外也包含了 methods 可以共用,舉例來說,學生資料可能會在,班級跟社團內被使用,當我們要撰寫元件時,就可以省略多餘的 data 定義。
VUE為單向資料流的框架,在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料,然而遇到跨層級的架構時,雖然也是可以一層層傳進去,只是這會造成多餘的處理及凌亂的程式碼,因此才有了 "provide" 來解決我們跨層級的需求。 層級展示圖
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
這次要講的是 $route 及 $router 的區別,看似相似的兩個東西,其實應用時機也大不相同,以下以簡單的幾個例子舉例。
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
我們在實作中,難免會遇到在不同組件中,卻有需求相同的資料格式,因此 mixins 可以達到我們的需求,除了 data 以外也包含了 methods 可以共用,舉例來說,學生資料可能會在,班級跟社團內被使用,當我們要撰寫元件時,就可以省略多餘的 data 定義。
VUE為單向資料流的框架,在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料,然而遇到跨層級的架構時,雖然也是可以一層層傳進去,只是這會造成多餘的處理及凌亂的程式碼,因此才有了 "provide" 來解決我們跨層級的需求。 層級展示圖
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
這次要講的是 $route 及 $router 的區別,看似相似的兩個東西,其實應用時機也大不相同,以下以簡單的幾個例子舉例。
你可能也想看
Google News 追蹤
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
10/22/2020 紀錄 一個月內,我的紀錄就打破了三次。 其實也沒什麼大不了的。 帶團登山的團員最年長紀錄,推進到八十歲。   這位先生靈活的動作,完全不像八十歲。 相處兩天後,我並不意外,他還能走能跳。 懂得收,懂得放。 不逞強,不賣老。 但這幾點,其實有智慧的人都還能作到
在遇見vocus以前,我已經好久好久沒有寫下自己的心情 甚至已經遠久到我想不起來上次寫出自己心情是甚麼時候了 時光飛逝,再回想起那個曾經愛在網路上寫下心情的自己...好陌生 還記得以前打一篇文章,形容一個感受,都是輕輕鬆鬆 甚至還很自傲的覺得自己的用字遣詞很好 但,就在打這篇文章時
雙生— 你的陪伴 在我的認知瓦解的時候 你在一旁 沒有說出你的認知 只是用你的能量 陪伴 在我周圍 沒有說出你的想法 只是陪我去經歷 去體會 你的能量很溫柔 你的陪伴很溫柔 希望我也能用一樣的方式陪著你 任何時候
我在2022/4/13加入方格子。
Thumbnail
在現在這個,眾多人渴望被看見的時代,如果你也擁有自己的自媒體,或者你也是一位創作者,你有沒有想過,你想要被看見的理由是什麼?動機,會決定方向,紀錄片《坂本龍一:終章》讓我認真的思考了這個問題,我想要我的品牌與創作,走到哪裡,留下什麼樣的影響力?
我從未如此深刻地感受到,我與我自己的距離如此遙遠,卻真實存在這個世界。(卡謬) 這篇記錄願意接受治療的自己,謝謝。 - :很多人來唸金大是為了逃離自己的家,你也是這樣子嗎? :不是,我不是單純為了逃家而填金大的,我沒有目標、夢想,我可以因為別人的一句話全都放棄,我越來越感受不到世界的溫度。 - 我已
看著你寫過的mail, 總覺得你的心意需要被紀錄...
至ooo外遇離婚、隱瞞婚姻事實、上網交友,已過了那麼久。 最近因為某件事我又把以前的紀錄調出來看。 一邊和太太說,我愛你;一邊和約會對象說和太太感情不深,想分開,問她有對象嗎?一邊和太太說,想要生小孩,愛妳所以娶妳;一邊和約會對象說,不敢和太太生小孩,結婚只是為了達成目的。這樣一個人。 這樣一個人,
10/3(六)下午接獲醫院通知,長期臥床的大姑突然停止呼吸心跳,由於我們之前有簽不做心肺復甦及急救呼吸器等急救措施,希望氣切插管臥床十年的她,不要繼續受折磨。於是,開啟了我第一次處理親人亡故的經驗。記錄下來的是大姑教我的功課。
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
10/22/2020 紀錄 一個月內,我的紀錄就打破了三次。 其實也沒什麼大不了的。 帶團登山的團員最年長紀錄,推進到八十歲。   這位先生靈活的動作,完全不像八十歲。 相處兩天後,我並不意外,他還能走能跳。 懂得收,懂得放。 不逞強,不賣老。 但這幾點,其實有智慧的人都還能作到
在遇見vocus以前,我已經好久好久沒有寫下自己的心情 甚至已經遠久到我想不起來上次寫出自己心情是甚麼時候了 時光飛逝,再回想起那個曾經愛在網路上寫下心情的自己...好陌生 還記得以前打一篇文章,形容一個感受,都是輕輕鬆鬆 甚至還很自傲的覺得自己的用字遣詞很好 但,就在打這篇文章時
雙生— 你的陪伴 在我的認知瓦解的時候 你在一旁 沒有說出你的認知 只是用你的能量 陪伴 在我周圍 沒有說出你的想法 只是陪我去經歷 去體會 你的能量很溫柔 你的陪伴很溫柔 希望我也能用一樣的方式陪著你 任何時候
我在2022/4/13加入方格子。
Thumbnail
在現在這個,眾多人渴望被看見的時代,如果你也擁有自己的自媒體,或者你也是一位創作者,你有沒有想過,你想要被看見的理由是什麼?動機,會決定方向,紀錄片《坂本龍一:終章》讓我認真的思考了這個問題,我想要我的品牌與創作,走到哪裡,留下什麼樣的影響力?
我從未如此深刻地感受到,我與我自己的距離如此遙遠,卻真實存在這個世界。(卡謬) 這篇記錄願意接受治療的自己,謝謝。 - :很多人來唸金大是為了逃離自己的家,你也是這樣子嗎? :不是,我不是單純為了逃家而填金大的,我沒有目標、夢想,我可以因為別人的一句話全都放棄,我越來越感受不到世界的溫度。 - 我已
看著你寫過的mail, 總覺得你的心意需要被紀錄...
至ooo外遇離婚、隱瞞婚姻事實、上網交友,已過了那麼久。 最近因為某件事我又把以前的紀錄調出來看。 一邊和太太說,我愛你;一邊和約會對象說和太太感情不深,想分開,問她有對象嗎?一邊和太太說,想要生小孩,愛妳所以娶妳;一邊和約會對象說,不敢和太太生小孩,結婚只是為了達成目的。這樣一個人。 這樣一個人,
10/3(六)下午接獲醫院通知,長期臥床的大姑突然停止呼吸心跳,由於我們之前有簽不做心肺復甦及急救呼吸器等急救措施,希望氣切插管臥床十年的她,不要繼續受折磨。於是,開啟了我第一次處理親人亡故的經驗。記錄下來的是大姑教我的功課。