今天完成一個新的小小功能
把原本的MD編輯器，改成這個：
[md-editor-v3](https://github.com/imzbf/md-editor-v3)
然後設定好圖片上傳到 imgur 的API

功能說起來滿簡單的，本來以為 Imgur 的 API 會有限制很多什麼的
結果其實沒有，哈哈！
不過也是有遇到一些小雷，下面就說明一下

首先，當然是要跑去 imgur 去註冊一個 API 的使用 ID
這部份其實有一些小繞圈子，直接搜尋還真的不好找到位置
原來他的 API registration 連結藏在 API 文件中介紹認證的部分，在這個連結裡：
**_[ImgurAPI](https://apidocs.imgur.com/#authorization-and-oauth)_**
，有一個小小的
**_[Registration](https://api.imgur.com/oauth2/addclient)_** ，要繞這麼一大圈，才能真的跑到他的 API 註冊區，說來也麻煩（笑）。

這個不說，API 的申請也有好幾個選擇，但其實只是要上傳圖床根本不用設定很複雜的一堆 OAuth (我們也不需要使用者的資料啊 XD），只需要很簡單申請下面圈起來的這種 API 點即可：

**（圖中打勾的需填寫，那個 callback URL 是 OAuth2 才需要用到，不用填）**

**（如果直接勾 Anonymous usage... 會要求你仍要填寫 callback URL，這裡有個小技巧，只要先勾第二個 OAuth2 without callback 之後再去勾 Anonymous usage，callback URL 就會變成不用填寫了 XD）**

![示意圖](https://i.imgur.com/G9z0y3Q.png)

申請好之後，接下就是要把 CODE 放到我們的應用程式裡，先查閱 API 文件，我是用 axios 來實作，文件內容還算詳細，不過要小心，IMGUR 的 AXIOS 範例是使用 NODE 下面的 AXIOS，有一些東西跟瀏覽器環境不同，需要修改，但總之改出來的上傳圖片程式碼應該如下：

```typescript=
// data 要傳入從 input dom裡面得到的檔案物件
// 通常就是 inputelement.files[0] (只上傳一個圖片的話）
const formdata = new FormData();
formdata.append("image", data);
axios({
    method: 'post',
    url: 'https://api.imgur.com/3/image',
    headers: {
        'Authorization': 'Client-ID ' + '申請到的 APP Cliend ID',
        'Content-Type': 'multipart/form-data',
    },
    data: formdata
}).then(res => {
    // 正確上傳的話，網址的連結會在 res.data.data.link
    console.log(res.data.data.link)
}).catch(err =>
    console.log(err)
})
```

接下來呢，要把這段東西包裹在一個 Promise 中，這樣才能夠非同步地處理圖片上傳的資料後，把獲得的網址傳回給編輯器使用，所以上面的 code 小小改寫成下面的：

```typescript=
const uploadImgur = (data, clientID) => {
    return new Promise<string>((resolve, reject) => {
        var formdata = new FormData();
        formdata.append("image", data);
        axios({
            method: 'post',
            url: 'https://api.imgur.com/3/image',
            headers: {
                'Authorization': 'Client-ID ' + clientID,
                'Content-Type': 'multipart/form-data',
            },
            data: formdata
        }).then(res => {
            resolve(res.data.data.link);
        }).catch(err => {
            reject(err);
        })
    })
}
```

那麼基本上，這個函式就可以當成使用 axios 上傳到 Imgur 圖床的泛用函式了，這會是一個非同步的函式，因為傳回來的是 Promise :)， 最終傳回的資料是一個圖片所在的網址

## ...講是這麼簡單啦，結果在 本地端跑 yarn dev 測試的時候不斷出錯，每次 IMGUR API 都會丟一個 429 錯誤碼給我！

後來翻了老半天，才發現原來這個問題還頗呆，也是不呆啦，錯誤訊息內容是有寫著一些說明，主要是說這次的請求已經超出了限額流量，後來翻了翻資料，發現是因為我這邊在 localhost dev 的環境下，送出的請求會用 localhost 作為來源，導致了這個錯誤，如果放到有真實位置的主機上，或者是把 dev 的網址改成用 ip 的方式操作，如

http://127.0.0.1:xxxx/

這樣，就可以正常運作了，總算... XD

搞定了上傳的 API 之後，剩下的問題就是把回傳的圖片位址丟給編輯器，並且讓編輯器自動生成 Markdown 語法，
這個部分不同編輯器有不同作法，大家就自己努力啦～ XD



Imgur 圖片上傳功能

留言區