當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

imgbb图床API

發(fā)布時(shí)間：2023/12/8 编程问答 77 豆豆

生活随笔收集整理的這篇文章主要介紹了 imgbb图床API 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

imgbb 圖床 API 及其插件

以下內(nèi)容均可以在 imgbb 圖床官網(wǎng)的相關(guān)API文檔找到。此處僅做學(xué)習(xí)記錄。

在 imgbb 官網(wǎng)注冊(cè)賬號(hào)后，點(diǎn)擊左上角的【關(guān)于】–【API】即可看到相關(guān)的使用文檔：

imgbb API 使用文檔：API — ImgBB

2.1、API key

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

【API key】：5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f

此時(shí)下方還會(huì)有 delete 和 Add API key 兩個(gè)選項(xiàng)，不要亂點(diǎn)，否則得到的 API key 可能會(huì)改變，除非你有相關(guān)的需求。這個(gè) key 將作為后續(xù)使用時(shí)的一個(gè)必須參數(shù)。

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.

大概意思就是這個(gè) API 可以使用 POST 或 GET 請(qǐng)求來調(diào)用。但是更加建議用 POST 請(qǐng)求。

2.3、Image Upload

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

這就是我們調(diào)用的那個(gè) API 地址。

2.4、Parameters

2.4.1、參數(shù)介紹

調(diào)用這個(gè) API 時(shí)可以攜帶四個(gè) url 參數(shù)：

key (required)：The API key.

【必須——字符串】：也就是我們上面 2.1 中得到的那個(gè) API key。
image (required)：A binary file, base64 data, or a URL for an image. (up to 32 MB)

【必須——字符串】：一個(gè)二進(jìn)制文件、base64格式的數(shù)據(jù)或某個(gè)圖片文件的 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

【可選——字符串】：設(shè)置文件的名字；如果沒有設(shè)置的話，則自動(dòng)檢測(cè)。
expiration (optional)：Enable this if you want to force uploads to be auto deleted after certain time (in seconds 60-15552000)

【可選——整數(shù)】：設(shè)置文件過期時(shí)間，時(shí)間一到則自動(dòng)刪除。范圍為 60-15552000，單位為秒。

2.4.2、使用參數(shù)時(shí)的幾個(gè)注意點(diǎn)

①經(jīng)過試驗(yàn)， name 參數(shù)似乎只能設(shè)置為英文，如果設(shè)置為中文的話，該圖片的名稱會(huì)自動(dòng)被改為 image。

②如果同一張圖片（image 參數(shù)一致）被重復(fù)上傳到 imgbb 中，則 imgbb 相冊(cè)中不會(huì)重復(fù)保存。

③四個(gè)參數(shù)必須通過 url 參數(shù)的形式傳遞過去，否則就會(huì)報(bào)與自定義請(qǐng)求頭問題相關(guān)的錯(cuò)。但是只要你通過 url 參數(shù)的方式調(diào)用這個(gè)API，則可以正常使用其上傳功能。

如果你使用 axios 發(fā)送請(qǐng)求，然后把 image 參數(shù)配置在 data 配置項(xiàng)中，而不是 params 中：

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

就會(huì)報(bào)下面的不允許自定義請(qǐng)求頭信息的錯(cuò)誤：

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)

而下面是相關(guān)的響應(yīng)頭信息（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

可以看到，響應(yīng)頭中是設(shè)置了 access-control-allow-origin 為 * 的，而且狀態(tài)碼也為 200。但是查看響應(yīng)體信息，卻發(fā)現(xiàn)為空！這個(gè)結(jié)果非常的詭異……

以上的輸出信息都是在Edge瀏覽器中的。后來我在Chrome瀏覽器中打開這個(gè)文件，同樣嘗試用 axios 發(fā)送請(qǐng)求，卻觀察到谷歌控制臺(tái)的輸出信息有點(diǎn)不同。

首先是谷歌瀏覽器中的 Network 選項(xiàng)卡中顯示發(fā)送請(qǐng)求后先后有兩個(gè)請(qǐng)求消息：

第一個(gè)請(qǐng)求消息是失敗的，沒有響應(yīng)（Response）的相關(guān)信息，但是有我們通過 data 配置項(xiàng)傳遞的 image 數(shù)據(jù)。

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

第二個(gè)請(qǐng)求消息和Edge瀏覽器中的顯示是一樣的，都是成功的，其狀態(tài)碼為 200。但是查看響應(yīng)體信息，卻發(fā)現(xiàn)也為空。

一番分析后我發(fā)現(xiàn)，其實(shí) imgbb 應(yīng)該是設(shè)置了 Nginx 代理，而第二個(gè)請(qǐng)求信息以及它的響應(yīng)就是來自這個(gè)代理服務(wù)器的。其響應(yīng)的結(jié)果其實(shí)是一個(gè)包含錯(cuò)誤信息的網(wǎng)頁，所以第二個(gè)請(qǐng)求的狀態(tài)才是 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" }

目前這個(gè)問題還沒有想到解決辦法。但是應(yīng)該還是和 image 參數(shù)的傳遞方式有關(guān)。

④瀏覽器對(duì) URL 字符長度有一定要求，而base64格式的數(shù)據(jù)往往很長，如果直接以 url 參數(shù)的方式傳遞過去可能會(huì)導(dǎo)致異常。官方文檔中也有相關(guān)的提示：

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.

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

我嘗試將一個(gè) base64 編碼比較短（短到符合Chrome對(duì) URL 字符數(shù)量的限制）的 image 數(shù)據(jù)當(dāng)做 url 參數(shù)發(fā)送請(qǐng)求（也就是在 params 配置項(xiàng)中直接配置了一個(gè) image 參數(shù)，而且其值是一個(gè) base64 格式的圖片）。

這次倒是有了響應(yīng)，但是狀態(tài)卻是 400。控制臺(tái)報(bào)了以下的錯(cuò)：

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)

查看響應(yīng)體，發(fā)現(xiàn)了如下JSON格式的報(bào)錯(cuò)信息：

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

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

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=="# 輸出（請(qǐng)求失敗） {"status_code":400,"error":{"message":"Invalid base64 string.","code":120,"context":"Exception"},"status_txt":"Bad Request" }

上方的 YOUR_CLIENT_API_KEY 就是填上面提到的那個(gè) API key；image=xxxxxxxxxxxx 就是上面提到的 image 參數(shù)。

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.

有關(guān) curl 命令的用法，請(qǐng)參照下方鏈接：

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

參考：curl 的用法指南 - 阮一峰的網(wǎng)絡(luò)日志

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

2.5.2、使用 axios 發(fā)送請(qǐng)求

使用 axios 發(fā)送POST請(qǐng)求，從而上傳圖片：

axios({// 請(qǐng)求類型method: 'POST',// URL，這里就是上面文檔提到的【API link】url: 'https://api.imgbb.com/1/upload',// 設(shè)置請(qǐng)求體，在 params 中設(shè)置的參數(shù)最后都將變?yōu)閡rl參數(shù)跟在請(qǐng)求行地址的后面params: {key: '5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f',// 設(shè)置 600 秒后過期expiration: 600,// 設(shè)置我們要上傳的圖片鏈接，可以是本地圖片image: 'https://i.loli.net/2021/07/31/7Iw5ur4DXQFEmtG.png'} }).then(response => {// 在控制臺(tái)輸出響應(yīng)體中圖片在服務(wù)器中的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.

大概意思就是：這個(gè) API 的響應(yīng)會(huì)以JSON的格式展示所有的相關(guān)上傳信息。里面包含了頭信息中的狀態(tài)碼以便我們很容易地知道這個(gè)請(qǐng)求是否成功。

JSON格式的響應(yīng)數(shù)據(jù)的結(jié)構(gòu)：

注意，利用 axios 發(fā)送請(qǐng)求時(shí)，這個(gè)響應(yīng)數(shù)據(jù)是保存在 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 }

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

2.7、相關(guān)插件

imgbb 還提供了相關(guān)的插件代碼，在 imgbb 官網(wǎng)注冊(cè)賬號(hào)后，點(diǎn)擊左上角的【關(guān)于】–【插件】即可看到相關(guān)的使用文檔：

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

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

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

那么在輸入框旁將出現(xiàn)一個(gè)【上傳圖片】的按鈕，如下所示：

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

有關(guān)參考

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

參考：ImgBB — 免費(fèi)圖片存取/上傳圖片

參考：API — ImgBB

參考：上傳插件 — ImgBB