imgbb 圖床 API 及其插件

以下內容均可以在 imgbb 圖床官網的相關API文檔找到。此處僅做學習記錄。

在 imgbb 官網注冊賬號后，點擊左上角的【關于】–【API】即可看到相關的使用文檔：

imgbb API 使用文檔：API — ImgBB

2.1、API key

在注冊并登錄的前提下，點擊【get API key】則在上方文本框中可以得到一串無規律字符：

【API key】：5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f

此時下方還會有 delete 和 Add API key 兩個選項，不要亂點，否則得到的 API key 可能會改變，除非你有相關的需求。這個 key 將作為后續使用時的一個必須參數。

2.2、Request method

API v1 calls can be done using the POST or GET request methods but since GET request are limited by the maximum allowed length of an URL you should prefer the POST request method.

大概意思就是這個 API 可以使用 POST 或 GET 請求來調用。但是更加建議用 POST 請求。

2.3、Image Upload

https://api.imgbb.com/1/upload

這就是我們調用的那個 API 地址。

2.4、Parameters

2.4.1、參數介紹

調用這個 API 時可以攜帶四個 url 參數：

• key (required)：The API key.

  【必須——字符串】：也就是我們上面 2.1 中得到的那個 API key。

• image (required)：A binary file, base64 data, or a URL for an image. (up to 32 MB)

  【必須——字符串】：一個二進制文件、base64格式的數據或某個圖片文件的 URL 地址（最大 32 MB）。

• name (optional)：The name of the file, this is automatically detected if uploading a file with a POST and multipart / form-data

  【可選——字符串】：設置文件的名字；如果沒有設置的話，則自動檢測。

• expiration (optional)：Enable this if you want to force uploads to be auto deleted after certain time (in seconds 60-15552000)

  【可選——整數】：設置文件過期時間，時間一到則自動刪除。范圍為 60-15552000，單位為秒。

2.4.2、使用參數時的幾個注意點

①經過試驗， name 參數似乎只能設置為英文，如果設置為中文的話，該圖片的名稱會自動被改為 image。

②如果同一張圖片（image 參數一致）被重復上傳到 imgbb 中，則 imgbb 相冊中不會重復保存。

③四個參數必須通過 url 參數的形式傳遞過去，否則就會報與自定義請求頭問題相關的錯。但是只要你通過 url 參數的方式調用這個API，則可以正常使用其上傳功能。

如果你使用 axios 發送請求，然后把 image 參數配置在 data 配置項中，而不是 params 中：

axios({method: 'POST',url: 'https://api.imgbb.com/1/upload',//url 參數params: {key: key,// image: image,expiration: expiration,name: picname},data: {image: image} }).then(response => {console.log(response); }, reason => {console.log(reason); });

就會報下面的不允許自定義請求頭信息的錯誤：

Access to XMLHttpRequest at 'https://api.imgbb.com/1/upload?key=5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f&expiration=300&name=ScriptIcon' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.Error: Network Errorat createError (createError.js:17)at XMLHttpRequest.handleError (xhr.js:83)

而下面是相關的響應頭信息（Response Headers）：

access-control-allow-headers: X-Requested-With, Cache-Control access-control-allow-methods: GET, POST, OPTIONS access-control-allow-origin: * content-encoding: gzip content-type: text/html; charset=UTF-8 date: Sat, 28 Aug 2021 12:09:47 GMT server: nginx status: 200 vary: Accept-Encoding

可以看到，響應頭中是設置了 access-control-allow-origin 為 * 的，而且狀態碼也為 200。但是查看響應體信息，卻發現為空！這個結果非常的詭異……

以上的輸出信息都是在Edge瀏覽器中的。后來我在Chrome瀏覽器中打開這個文件，同樣嘗試用 axios 發送請求，卻觀察到谷歌控制臺的輸出信息有點不同。

首先是谷歌瀏覽器中的 Network 選項卡中顯示發送請求后先后有兩個請求消息：

第一個請求消息是失敗的，沒有響應（Response）的相關信息，但是有我們通過 data 配置項傳遞的 image 數據。

可以看到下方的請求頭信息中有一個 【Provisional headers are shown】警告，說明我們在 data 配置項傳遞的 image 項是不被接受的類型。（也就是沒有配置 Access-Control-Allow-Headers 這個字段）。

第二個請求消息和Edge瀏覽器中的顯示是一樣的，都是成功的，其狀態碼為 200。但是查看響應體信息，卻發現也為空。

一番分析后我發現，其實 imgbb 應該是設置了 Nginx 代理，而第二個請求信息以及它的響應就是來自這個代理服務器的。其響應的結果其實是一個包含錯誤信息的網頁，所以第二個請求的狀態才是 200。

// https://api.imgbb.com/1/upload?key=5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f&expiration=300&name=ScriptIcon {"status_code":400,"error":{"message":"Empty upload source.","code":130,"context":"Exception"},"status_txt":"Bad Request" }

目前這個問題還沒有想到解決辦法。但是應該還是和 image 參數的傳遞方式有關。

④瀏覽器對 URL 字符長度有一定要求，而base64格式的數據往往很長，如果直接以 url 參數的方式傳遞過去可能會導致異常。官方文檔中也有相關的提示：

Note: Always use POST when uploading local files. Url encoding may alter the base64 source due to encoded characters or just by URL request length limit due to GET request.

大概意思就是：上傳本地文件時始終使用 POST 請求。 Url 編碼可能會因編碼字符或因 GET 請求而僅因 URL 請求長度限制而改變 base64 源。

我嘗試將一個 base64 編碼比較短（短到符合Chrome對 URL 字符數量的限制）的 image 數據當做 url 參數發送請求（也就是在 params 配置項中直接配置了一個 image 參數，而且其值是一個 base64 格式的圖片）。

這次倒是有了響應，但是狀態卻是 400。控制臺報了以下的錯：

POST https://api.imgbb.com/1/upload?key=5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f&image=data:image%2Fpng%3Bbase64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAABTklEQVQ4jY3TO0tcURQF4G%2FixFdhCIg2qWysZPwDsUkXSJk2Qso0IpLOTtLERkGwEjQhXV5d0gkGK6v7E%2FIHgg9EHR0nHLLvzGHujGbB5pzLOXvttfc6twaNRiMta1g1GG28xJfyRlEU6rF%2FFskpjvA4o7nABD7gM17hY3lYEjzHOd4NqP8QW3gURA%2BwJzYJI2hV0rq4xtfsexdPcwW3EQmLaSw4wVCQr%2BM1DtDEJt7iVz1jLRUsB0GOn9iPymWRJ7mChOFY5ysNVFHrHaKwKWEGUyG1HZcnMY4%2F0UarH0Ez1u%2BYq9T8h5tw5BTTg1p4EYfNnuR6WC3srCgo%2B%2FodcRdK%2B7ubrGIRvfeLq7hz3KsgESXPE97HDFKfOUazxLFegst4MAmf7pGfkP6NNNAOwTesYAM%2FYkgdrzOcYRYLeJMTHMbTTE926T8U7GAb%2FgI%2BkkP5n3CsvwAAAABJRU5ErkJggg%3D%3D&expiration=300&name=ScriptIcon 400Error: Request failed with status code 400at createError (createError.js:17)at settle (settle.js:18)at XMLHttpRequest.handleLoad (xhr.js:61)

查看響應體，發現了如下JSON格式的報錯信息：

{"status_code":400,"error":{"message":"Invalid base64 string.","code":120,"context":"Exception"},"status_txt":"Bad Request" }

按照這里【Invalid base64 string】的提示，難道是我傳入的 base64 格式的數據不合規矩？后來我又通過各種 圖片轉 base64 的工具生成同一張圖片的 base64 編碼，然后進行代碼對比，發現都是一模一樣的，那說明我的 base64 格式的數據是沒毛病的啊？我想可能是 imgbb 的服務端確實不支持解析這種格式的數據，雖然官方文檔里說了可以，但是看來應該是沒法兒由我們這端解決了。

2.5、Example call

2.5.1、使用 curl 命令

在命令行中輸入以下格式的命令：

curl --location --request POST "https://api.imgbb.com/1/upload?expiration=600&key=YOUR_CLIENT_API_KEY" --form "image=R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

例如：

curl --location --request POST "https://api.imgbb.com/1/upload?expiration=300&key=5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f" --form "image=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABTklEQVQ4jY3TO0tcURQF4G/ixFdhCIg2qWysZPwDsUkXSJk2Qso0IpLOTtLERkGwEjQhXV5d0gkGK6v7E/IHgg9EHR0nHLLvzGHujGbB5pzLOXvttfc6twaNRiMta1g1GG28xJfyRlEU6rF/FskpjvA4o7nABD7gM17hY3lYEjzHOd4NqP8QW3gURA+wJzYJI2hV0rq4xtfsexdPcwW3EQmLaSw4wVCQr+M1DtDEJt7iVz1jLRUsB0GOn9iPymWRJ7mChOFY5ysNVFHrHaKwKWEGUyG1HZcnMY4/0UarH0Ez1u+Yq9T8h5tw5BTTg1p4EYfNnuR6WC3srCgo+/odcRdK+7ubrGIRvfeLq7hz3KsgESXPE97HDFKfOUazxLFegst4MAmf7pGfkP6NNNAOwTesYAM/YkgdrzOcYRYLeJMTHMbTTE926T8U7GAb/gI+kkP5n3CsvwAAAABJRU5ErkJggg=="# 輸出（請求失敗） {"status_code":400,"error":{"message":"Invalid base64 string.","code":120,"context":"Exception"},"status_txt":"Bad Request" }

上方的 YOUR_CLIENT_API_KEY 就是填 上面提到的那個 API key；image=xxxxxxxxxxxx 就是上面提到的 image 參數。

Note: Always use POST when uploading local files. Url encoding may alter the base64 source due to encoded characters or just by URL request length limit due to GET request.

大概意思就是：上傳本地文件時始終使用 POST 請求。 Url 編碼可能會因編碼字符或因 GET 請求而僅因 URL 請求長度限制而改變 base64 源。

有關 curl 命令的用法，請參照下方鏈接：

更新：2021年8月28日14:16:49

參考：curl 的用法指南 - 阮一峰的網絡日志

參考：CURL常用命令 - 張賀 - 博客園

2.5.2、使用 axios 發送請求

使用 axios 發送POST請求，從而上傳圖片：

axios({// 請求類型method: 'POST',// URL，這里就是上面文檔提到的【API link】url: 'https://api.imgbb.com/1/upload',// 設置請求體，在 params 中設置的參數最后都將變為url參數跟在請求行地址的后面params: {key: '5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f',// 設置 600 秒后過期expiration: 600,// 設置我們要上傳的圖片鏈接，可以是本地圖片image: 'https://i.loli.net/2021/07/31/7Iw5ur4DXQFEmtG.png'} }).then(response => {// 在控制臺輸出響應體中圖片在服務器中的url地址console.log(response.data.data.image.url); });

2.6、API response

API v1 responses display all the image uploaded information in JSON format.

JSON the response will have headers status codes to allow you to easily notice if the request was OK or not. It will also output the status properties.

大概意思就是：這個 API 的響應會以JSON的格式展示所有的相關上傳信息。里面包含了頭信息中的狀態碼以便我們很容易地知道這個請求是否成功。

JSON格式的響應數據的結構：

注意，利用 axios 發送請求時，這個響應數據是保存在 response.data 中的。

{"data": {"id": "2ndCYJK","title": "c1f64245afb2","url_viewer": "https://ibb.co/2ndCYJK","url": "https://i.ibb.co/w04Prt6/c1f64245afb2.gif","display_url": "https://i.ibb.co/98W13PY/c1f64245afb2.gif","size": "42","time": "1552042565","expiration":"0","image": {"filename": "c1f64245afb2.gif","name": "c1f64245afb2","mime": "image/gif","extension": "gif","url": "https://i.ibb.co/w04Prt6/c1f64245afb2.gif",},"thumb": {"filename": "c1f64245afb2.gif","name": "c1f64245afb2","mime": "image/gif","extension": "gif","url": "https://i.ibb.co/2ndCYJK/c1f64245afb2.gif",},"medium": {"filename": "c1f64245afb2.gif","name": "c1f64245afb2","mime": "image/gif","extension": "gif","url": "https://i.ibb.co/98W13PY/c1f64245afb2.gif",},"delete_url": "https://ibb.co/2ndCYJK/670a7e48ddcb85ac340c717a41047e5c"},"success": true,"status": 200 }

以上響應中，response.data.data.image.url 中保存的就是我們上傳圖片成功之后的圖片地址，可以直接使用或查看。

2.7、相關插件

imgbb 還提供了相關的插件代碼，在 imgbb 官網注冊賬號后，點擊左上角的【關于】–【插件】即可看到相關的使用文檔：

imgbb 插件使用文檔：上傳插件 — ImgBB

簡單來說，這個插件的作用就是在某些需要上傳圖片的地方提供一個上傳按鈕，點擊之后就可以調用 imgbb 的圖片上傳服務。還可以自定義這個按鈕的樣式。

// 在項目中引入上傳的插件代碼 <script async src="https://imgbb.com/upload.js"></script> // 在網頁中設置輸入框 <div><textarea>上傳文件</textarea> </div>

那么在輸入框旁將出現一個【上傳圖片】的按鈕，如下所示：

但是，我試用了一下，確實是有上傳圖片的彈框，但是上傳之后不知道所上傳的圖片到了哪里……可能是場景沒有選好，以后有機會了再作研究，官方文檔里也有【適用項目】的說明。

有關參考

更新：2021年8月28日15:15:59

參考：ImgBB — 免費圖片存取/上傳圖片

參考：API — ImgBB

參考：上傳插件 — ImgBB

更新：2021年8月28日14:16:49

【curl 命令】

參考：curl 的用法指南 - 阮一峰的網絡日志

參考：CURL常用命令 - 張賀 - 博客園

總結

以上是生活随笔為你收集整理的imgbb图床API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。