我在我的应用程序中使用 axios。当我在打开应用程序后第一次发出帖子请求时,它失败并出现以下错误。从第二次开始,它可以正常工作。
Network Error
- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/adapters/xhr.js:81:22 in handleError
- node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:600:10 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:395:6 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
我正在通过 http://my_ip:my_port/连接到真实服务器的真实 android 设备上运行。我通过在 kotlin 中创建 native android 项目来尝试相同的发布请求,并且它可以正常工作这是我的代码:
const upload = () => {
setAnalyzing(true);
axios.post(URL_PREDICT, formBody(), {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(handleSuccess)
.catch(handleFail);
}
const formBody = () => {
const photo = {
uri: image,
type: 'image/jpeg',
name: 'photo.jpg',
};
const form = new FormData();
form.append("file", photo);
return form;
};
const handleFail = (error) => {
console.log(error)
console.log(error?.response?.data);
setAnalyzing(false);
toggle();
alert("ERROR " + error);
};
const handleSuccess = response => {
console.log('success...');
setAnalyzing(false);
toggle();
console.log(response);
navigation.navigate('Result', response);
};
知道是什么原因造成的吗?
最佳答案
我认为您正在使用 expo-image-picker
.
这里有两个独立的问题在起作用。假设我们得到 imageUri
来自 image-picker
,然后我们将使用以下这些代码行从前端上传。
const formData = new FormData();
formData.append('image', {
uri : imageUri,
type: "image",
name: imageUri.split("/").pop()
});
第一个问题是 imageUri
本身。如果假设照片路径是 /user/.../path/to/file.jpg
.然后 android 中的文件选择器会给出 imageUri
值为 file:/user/.../path/to/file.jpg
而 iOS 中的文件选择器会给出 imageUri
值为 file:///user/.../path/to/file.jpg
.第一个问题的解决方案是使用
file://
而不是 file:
在android中的formData中。第二个问题是我们没有使用正确的
mime-type
.它在 iOS 上运行良好,但在 Android 上却不行。更糟糕的是,文件选择器包将文件类型指定为“图像”,并且没有提供正确的 mime 类型。解决方法是使用正确的
mime-type
在字段类型中的formData。例如:.jpg
的 MIME 类型文件将是 image/jpeg
对于 .png
文件将是 image/png
.我们不必手动执行此操作。相反,您可以使用一个非常著名的 npm 包,名为 mime。 .最终的工作解决方案是:
import mime from "mime";
const newImageUri = "file:///" + imageUri.split("file:/").join("");
const formData = new FormData();
formData.append('image', {
uri : newImageUri,
type: mime.getType(newImageUri),
name: newImageUri.split("/").pop()
});
关于android - react native 博览会 : Network error on android,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65697750/