Step 1. 註冊Imgur App，並拿到client ID
(此處主要參考https://auguston.github.io/imgur-api-upload-load/）
註冊Imgur App ：若沒有先登入imgur會被導到登入頁面，登入之後會被重新導向，建議先登入再點連結。
按照申請步驟最後會拿到一組client ID（重要），忘記了可以到setting→application找。
Step 2. 開始寫程式囉
（此處主要參考https://serversideup.net/uploading-files-vuejs-axios/）
首先使用vue當中的ref屬性直接取得input DOM元素，並設置監聽事件（當檔案被選取，事件就會觸發）
<input type=”file” name=”file” ref=”file” @change=”handleFileUpload”>接著把data的file綁定到事件觸發後取得的檔案資料
data: {
file:''
},
methods: {
handleFileUpload() {
this.file = this.$refs.file.files[0];
},
....}接著設置上傳按鈕，並綁定監聽事件
<button @click=”onSubmit”>upload</button>Step 3. 查看官方文件，決定要帶的參數資料
重點來了，按鈕綁的監聽事件方法，就是要發ajax的地方，而這個request要夾帶哪些參數呢？其實官方API文件都有範例程式碼滿清楚的，不過我一開始看還是有點眼花撩亂，因為真的很多…
首先找到我們要的方法
參照範例，並決定自己需要的參數：
（官方的範例用JQuery發ajax request，但在這裡我是用axios）
let formData = new FormData();
formData.append(‘image’, this.file); //required
formData.append(‘title’, ‘test’); //optional
formData.append(‘description’, ‘test’); //optionalaxios({
method: 'POST',
url: 'https://api.imgur.com/3/image',
data: formData,
headers: {
Authorization: "Client-ID " + {{apiKey}} //放置你剛剛申請的Client-ID
},
mimeType: 'multipart/form-data'
}).then(res => {
console.log(res)
}).catch(e => {
console.log(e)
})
終於看到 response status 200 真的是很感動，因為以前使用 axios 都只用到最陽春的設定（第一個參數＝網址，第二個參數＝要傳送的物件），還沒碰過這種要夾帶headers的，這時候真的就是要回去好好讀文件！搞得好多次都得到 400 Bad request 還有 401、403，就順便複習這些4開頭（代表用戶端發生錯誤）的狀態碼所代表的意義吧！
- 400 Bad request：通常是因為參數錯誤，沒有傳遞請求必須夾帶的參數或是參數類型不匹配
- 401 Unauthorized：沒有帶認證資料或者帶了錯誤的認證資料
- 403 Forbidden：用戶端帶了正確的參數,，但傳遞參數的用戶沒有權限訪問此站，伺服器收到請求但拒絕提供服務
好了，筆記到這邊差不多結束，如果之後想到別的再補充囉！
