如何使用ImgBB api与Axios进行反应？
我正在尝试使用Imgbb来上传图片，但到目前为止我还没有做到。API文档将其显示为一个示例调用：
curl --location --request POST "https://api.imgbb.com/1/upload?expiration=60&key=YOUR_CLIENT_API_KEY" --form "image=R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"我的轴心：
vendorImageUpload(img) {
var responseArr = []
var formData = new FormData()
formData.append("image", img)
formData.append("key", "api-key")
console.log(axios({
method: "post",
url: IMG_URL,
data: formData,
headers: {
"content-type": "multipart/form-data",
}
}))
}但是我得到了一个400错误。但是，当我用postman测试它时，当头中唯一的东西是content-type、content-length和host时，它就能工作。
我想使用formData.getHeaders()，因为它显然在this post中起作用，但它只在节点上工作，没有反应。
回答 3
Stack Overflow用户
发布于 2020-08-31 10:27:20
我认为问题来自于格式数据的设置。
uploadImage(img) {
let body = new FormData()
body.set('key', 'an_api_key')
body.append('image', img)
return axios({
method: 'post',
url: 'https://api.imgbb.com/1/upload',
data: body
})
}这很好，并以我想要的方式返回数据。对Sajal来说，谢谢你回答我的问题，其实我已经想出来了。但是，我不想为这么简单的事情添加另一个NPM库。
答复如下：
{
id: '5jKj6XV',
url_viewer: 'https://ibb.co/5jKj6XV',
url: 'https://i.ibb.co/94Z4Nmj/test.jpg',
display_url: 'https://i.ibb.co/94Z4Nmj/test.jpg',
title: 'test',
time: '1574431312',
image: {
filename: 'test.jpg',
name: 'test',
mime: 'image/jpeg',
extension: 'jpg',
url: 'https://i.ibb.co/94Z4Nmj/test.jpg',
size: 91264
},
thumb: {
filename: 'test.jpg',
name: 'test',
mime: 'image/jpeg',
extension: 'jpg',
url: 'https://i.ibb.co/5jKj6XV/test.jpg',
size: '12875'
},
delete_url: 'https://ibb.co/5jKj6XV/ffd8ef0b1c803f02443553535cf4a5f4'
}然后，在调用函数之后，可以使用.then存储数据。
...
uploadImage(e.target.files[0])
.then(resp => {
console.log(resp.data.data) // I'm aware it's data.data, that is how it returns stuff
})Stack Overflow用户
发布于 2020-08-31 08:43:10
有一个npm库imgbb-uploader。
var imgbbUploader = require('imgbb-uploader');
imgbbUploader("your-imgbb-api-key-string", "home/absolute/path/to/your/image/image.png")
.then(response => console.log(response))
.catch(error => console.error(1))响应将是这样的.
{
id: '5jKj6XV',
url_viewer: 'https://ibb.co/5jKj6XV',
url: 'https://i.ibb.co/94Z4Nmj/test.jpg',
display_url: 'https://i.ibb.co/94Z4Nmj/test.jpg',
title: 'test',
time: '1574431312',
image: {
filename: 'test.jpg',
name: 'test',
mime: 'image/jpeg',
extension: 'jpg',
url: 'https://i.ibb.co/94Z4Nmj/test.jpg',
size: 91264
},
thumb: {
filename: 'test.jpg',
name: 'test',
mime: 'image/jpeg',
extension: 'jpg',
url: 'https://i.ibb.co/5jKj6XV/test.jpg',
size: '12875'
},
delete_url: 'https://ibb.co/5jKj6XV/ffd8ef0b1c803f02443553535cf4a5f4'
}Stack Overflow用户
发布于 2021-04-12 13:15:07
要将图像发布到imgbb，需要用base64字符串对图像进行编码，因此可以使用FileReader()。见下文：
const handleSubmit = () => {
const rf = new FileReader();
rf.readAsDataURL(file); //file is from a useState() hook
rf.onloadend = function (event) {
const body = new FormData();
body.append("image", event.target.result.split(",").pop()); //To delete 'data:image/png;base64,' otherwise imgbb won't process it.
body.append("name", fileName);
fetch(imgUrl, {
method: "POST",
body: body
})
.then(res => {
console.log(res.json().then(console.log));
})
.catch(err => console.log(err));
}
})
在我的例子中，我从<input>获得了这个文件，您也可以在本地打开一个文件。如果您想使用imgbb的响应，请不要忘记使用res.json().then()。
https://stackoverflow.com/questions/62733308
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号