Javascript http POST请求响应,带有;“地位”:200但有一个空对象
我试图使用一个带有HTTP POST请求的API,它似乎可以工作,但当我得到响应时,它是空的 API应在体内接收Javascript http POST请求响应,带有;“地位”:200但有一个空对象,javascript,reactjs,http,react-native,Javascript,Reactjs,Http,React Native,我试图使用一个带有HTTP POST请求的API,它似乎可以工作,但当我得到响应时,它是空的 API应在体内接收base64编码图像 参数imageToRead来自react native Camera中的Camera组件返回的承诺。我不确定可能是那里的问题 内容如下: imageToRead=“/var/mobile/Containers/Data/Application/01B81FC9-B171-11GB-9B48-9D06F89B175A/Documents/3A997ACD-D63C-
base64
编码图像
参数imageToRead
来自react native Camera
中的Camera
组件返回的承诺。我不确定可能是那里的问题
内容如下:
imageToRead=“/var/mobile/Containers/Data/Application/01B81FC9-B171-11GB-9B48-9D06F89B175A/Documents/3A997ACD-D63C-41BD-9041-FDB834A0672A.jpg”
这个API还可以接收formData
文件,这就是我测试它的方法,它在节点环境中运行得非常好。但是,因为我的应用程序是一个本机iOS应用程序,所以我必须使用其他工具(如React native),不能使用相同的工具
在节点中测试API的代码:
var formData = {image: fs.createReadStream('/Users/Desktop/APITest/img/testOCR8.jpg')};
request.post({
url:'${url}',
formData: formData},
(err, httpResponse, body) => {
if (err) {
return console.error('upload failed:', err);
}
console.log(body);
});
recognise = (imageToRead) => {
RNFetchBlob.fs.readFile(imageToRead , 'base64')
.then((data) => {
fetch('${url}',{
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: data // the body contain the encoded image
})
.then((res) => { // promise returned with the response from the API
console.log(`i am the base64Image: ${data}`)
console.log('i am response', res)
})
.catch((errInFetch) => { // catch any error in the API
console.log('i am error:', errInFetch)
})
})
.catch((err) => {
console.log(err);
})
}
{ type: 'default',
status: 200,
ok: true,
statusText: undefined,
headers:
{ map:
{ server: [ 'nginx/1.10.3' ],
'content-type': [ 'application/json; charset="utf-8"' ],
'access-control-allow-origin': [ '*' ],
date: [ 'Thu, 10 May 2018 10:17:48 GMT' ],
'access-control-allow-headers': [ 'x-requested-with' ],
'content-encoding': [ 'gzip' ],
'content-length': [ '237' ],
connection: [ 'keep-alive' ] } },
url: 'https://api.openalpr.com/v2/recognize_bytes?secret_key=key&country=eu',
_bodyInit:
{ _data:
{ size: 371,
blobId: '5080ACA4-5D13-469C-B755-96B06A161FC6',
type: 'application/json',
offset: 0,
name: 'recognize_bytes' } },
_bodyBlob:
{ _data:
{ size: 371,
blobId: '5080ACA4-5D13-469C-B755-96B06A161FC6',
type: 'application/json',
offset: 0,
name: 'recognize_bytes' } } }
您可以看到我使用fs
模块中的fs.createReadStream
创建文件流,然后在请求正文中使用它。
我不能用React-Native复制同样的东西(如果你有一个解决方案,我可以用React-Native来做,那会更好!!)
因此,我尝试了不同的方法,并尝试对从camera.capture()
方法获得的文件进行编码,该方法随react native camera
一起提供给base64
,并将其放在体内,但我得到的响应是空的,没有任何错误,只是一个空对象
使用React-Native:
var formData = {image: fs.createReadStream('/Users/Desktop/APITest/img/testOCR8.jpg')};
request.post({
url:'${url}',
formData: formData},
(err, httpResponse, body) => {
if (err) {
return console.error('upload failed:', err);
}
console.log(body);
});
recognise = (imageToRead) => {
RNFetchBlob.fs.readFile(imageToRead , 'base64')
.then((data) => {
fetch('${url}',{
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: data // the body contain the encoded image
})
.then((res) => { // promise returned with the response from the API
console.log(`i am the base64Image: ${data}`)
console.log('i am response', res)
})
.catch((errInFetch) => { // catch any error in the API
console.log('i am error:', errInFetch)
})
})
.catch((err) => {
console.log(err);
})
}
{ type: 'default',
status: 200,
ok: true,
statusText: undefined,
headers:
{ map:
{ server: [ 'nginx/1.10.3' ],
'content-type': [ 'application/json; charset="utf-8"' ],
'access-control-allow-origin': [ '*' ],
date: [ 'Thu, 10 May 2018 10:17:48 GMT' ],
'access-control-allow-headers': [ 'x-requested-with' ],
'content-encoding': [ 'gzip' ],
'content-length': [ '237' ],
connection: [ 'keep-alive' ] } },
url: 'https://api.openalpr.com/v2/recognize_bytes?secret_key=key&country=eu',
_bodyInit:
{ _data:
{ size: 371,
blobId: '5080ACA4-5D13-469C-B755-96B06A161FC6',
type: 'application/json',
offset: 0,
name: 'recognize_bytes' } },
_bodyBlob:
{ _data:
{ size: 371,
blobId: '5080ACA4-5D13-469C-B755-96B06A161FC6',
type: 'application/json',
offset: 0,
name: 'recognize_bytes' } } }
响应:
var formData = {image: fs.createReadStream('/Users/Desktop/APITest/img/testOCR8.jpg')};
request.post({
url:'${url}',
formData: formData},
(err, httpResponse, body) => {
if (err) {
return console.error('upload failed:', err);
}
console.log(body);
});
recognise = (imageToRead) => {
RNFetchBlob.fs.readFile(imageToRead , 'base64')
.then((data) => {
fetch('${url}',{
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: data // the body contain the encoded image
})
.then((res) => { // promise returned with the response from the API
console.log(`i am the base64Image: ${data}`)
console.log('i am response', res)
})
.catch((errInFetch) => { // catch any error in the API
console.log('i am error:', errInFetch)
})
})
.catch((err) => {
console.log(err);
})
}
{ type: 'default',
status: 200,
ok: true,
statusText: undefined,
headers:
{ map:
{ server: [ 'nginx/1.10.3' ],
'content-type': [ 'application/json; charset="utf-8"' ],
'access-control-allow-origin': [ '*' ],
date: [ 'Thu, 10 May 2018 10:17:48 GMT' ],
'access-control-allow-headers': [ 'x-requested-with' ],
'content-encoding': [ 'gzip' ],
'content-length': [ '237' ],
connection: [ 'keep-alive' ] } },
url: 'https://api.openalpr.com/v2/recognize_bytes?secret_key=key&country=eu',
_bodyInit:
{ _data:
{ size: 371,
blobId: '5080ACA4-5D13-469C-B755-96B06A161FC6',
type: 'application/json',
offset: 0,
name: 'recognize_bytes' } },
_bodyBlob:
{ _data:
{ size: 371,
blobId: '5080ACA4-5D13-469C-B755-96B06A161FC6',
type: 'application/json',
offset: 0,
name: 'recognize_bytes' } } }
我希望有人能帮上忙。我和它斗争了这么长时间
.then((res) => {
console.log(`i am the base64Image: ${data}`)
console.log('i am response', res)
return res.json();
})
.then(res => {
console.log(res);
})
.catch((errInFetch) => { // catch any error in the API
console.log('i am error:', errInFetch)
})
Fetch响应体返回一个将由json()解析的承诺
因此,您可以从
res.json()
fetch
返回包含响应(响应对象)的promise
。然后,您需要再次使用response.json()
解析它,它返回promise resolvingjson
fetch(url, {
body: JSON.stringify(data),
cache: 'no-cache',
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
})
.then(response => response.json())
有关更多信息:200状态为成功获取http请求。您的API应该返回状态201,以便post显示消息,而不是200,例如:
res.status(201).send(data);
成功了,谢谢!!!虽然我仍然没有得到我应该得到的数据,但我一直在努力解决这个问题。回答是正确的,但有一些与图像相关的数据丢失了(如“results:[]”)。是否有可能没有正在处理的实际图像?或者没有办法,它会抛出一些错误?请注意,我在将路径转换为base64后检查了流,它确实返回了这个长字符串,我猜这就是base64文件。(只是试图涵盖所有的可能性)你能建议一些可能的测试吗?非常感谢。