imgbb图床API

赖念安

已于 2022-08-11 16:27:09 修改

阅读量1.5w

点赞数 2

分类专栏： JavaScript 实用经验文章标签： javascript 图床 api

于 2021-09-01 15:15:45 首次发布

本文链接：https://blog.csdn.net/qq_44879358/article/details/120038564

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 4 订阅

订阅专栏

实用经验

6 篇文章 4 订阅

订阅专栏

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 Error
    at 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。但是查看响应体信息，却发现也为空。

QQ截图20210828203708.png

一番分析后我发现，其实 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 400

Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:61)

QQ截图20210828212752.png

查看响应体，发现了如下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常用命令 - 张贺 - 博客园

赖念安

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
imgbb图床API

imgbb 图床 API 及其插件以下内容均可以在 imgbb 图床官网的相关API文档找到。此处仅做学习记录。在 imgbb 官网注册账号后，点击左上角的【关于】–【API】即可看到相关的使用文档：imgbb API 使用文档：API — ImgBB2.1、API key在注册并登录的前提下，点击【get API key】则在上方文本框中可以得到一串无规律字符：【API key】：5b1e20cd0xxxxxxxxxxxxxxxxxx91de3f此时下方还会有 delete 和 A
复制链接

扫一扫