[英]React Native Axios upload image return Network Error on Android
I tried to upload some data including an image to server using Axios
.我尝试使用
Axios
将一些数据(包括图像)上传到服务器。
It's working perfectly on iOS , but on Android, it returned Network Error
它在 iOS 上运行良好,但在 Android 上,它返回
Network Error
const data = new FormData();
data.append('tag', tag.METHOD_TAG_UPLOAD_PHOTO);
data.append('app_version', 1);
data.append('os_type', tag.OS_TYPE);
data.append('store_code', kodetoko);
data.append('photo', {
uri: image_picked.uri,
type: 'image/jpeg',
name: judul + ".jpg"
});
I tried to search for solution elsewhere, they said that the problem is within the type
of the photo
's object, it needs to use image/jpeg
type.我试图在其他地方寻找解决方案,他们说问题出在
photo
的 object type
内,需要使用image/jpeg
类型。 I'm using it but it still return Network Error
.我正在使用它,但它仍然返回
Network Error
。 Please help.请帮忙。
Open this dir 'android/app/src/debug/java/com/flatApp/ReactNativeFlipper.java'打开这个目录'android/app/src/debug/java/com/flatApp/ReactNativeFlipper.java'
Comment the line as per below code:根据以下代码注释该行:
NetworkingModule.setCustomClientBuilder( new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } });
I had the same issue and accepted answer didn't work for me.我有同样的问题,接受的答案对我不起作用。 Below is what helped me.
以下是对我有帮助的。
In android/app/src/main/java/com/{yourProject}/MainApplication.java comment the below line:在 android/app/src/main/java/com/{yourProject}/MainApplication.java 中注释以下行:
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
In android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java comment in line 43:在 android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java 第 43 行注释:
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
Code for image upload:图片上传代码:
var formData = new FormData(); formData.append('UserId', 'abc@abc.com'); formData.append('VisitId', '28596'); formData.append('EvidenceCapturedDate', '09/10/2019 13:28:20'); formData.append('EvidenceCategory', 'Before'); formData.append('EvidenceImage', { uri: Platform.OS === 'android'? `file:///${path}`: `/private${path}`, type: 'image/jpeg', name: 'image.jpg', }); axios({ url: UrlString.BaseUrl + UrlString.imageUpload, method: 'POST', data: formData, headers: { Accept: 'application/json', 'Content-Type': 'multipart/form-data' }, }).then(function (response) { console.log('*****handle success******'); console.log(response.data); }).catch(function (response) { console.log('*****handle failure******'); console.log(response); });
FLIPPER_VERSION=0.41.0 FLIPPER_VERSION=0.41.0
Update your Flipper_Version above or equal = 0.41.0更新您的 Flipper_Version 或等于 = 0.41.0
I faced this issue, I guess this issue about Flipper Network.我遇到了这个问题,我猜这个问题是关于 Flipper Network 的。
For while, I commented initializeFlipper(this, getReactNativeHost().getReactInstanceManager())有一段时间,我评论了 initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
in this file /android/app/src/main/java/com/{your_project}/MainApplication.java在这个文件/android/app/src/main/java/com/{your_project}/MainApplication.java
NOW THIS IS WORKING PROPERLY现在这工作正常
This should be fixed in version 0.39.0.这应该在版本 0.39.0 中修复。 To upgrade, edit android > gradle.properties
要升级,请编辑 android > gradle.properties
#Version of flipper SDK to use with React Native #与 React Native 一起使用的脚蹼 SDK 版本
FLIPPER_VERSION=0.39.0 // edit this manually
I had this issue as well and none of the above helped.我也有这个问题,以上都没有帮助。 Android is very specific about the file upload for the multipart/form data.
Android 对多部分/表单数据的文件上传非常具体。 If you have any of the file parameters wrong, it will fail with "Network Error" and no other information which is incredibly frustrating!
如果您有任何文件参数错误,它将失败并显示“网络错误”并且没有其他令人难以置信的令人沮丧的信息!
In order to get mine working, I started by following this example (from Expo, but nothing expo-specific here): https://github.com/expo/examples/blob/d86f50a710e3805494b458fae2595502d9afa7bc/with-formdata-image-upload/App.js In order to get mine working, I started by following this example (from Expo, but nothing expo-specific here): https://github.com/expo/examples/blob/d86f50a710e3805494b458fae2595502d9afa7bc/with-formdata-image-upload/App .js
I recommend starting with that too and trying some different things here on this line: where the file information is set for the requedst .我建议也从它开始,并在这一行尝试一些不同的东西: 文件信息设置为 request 的位置。 I only modified this example
axios
instead of fetch
for my issue.我只修改了这个例子
axios
而不是fetch
来解决我的问题。
add 'Content-Type': 'multipart/form-data'
in your headers will resolve the issue在标题中添加
'Content-Type': 'multipart/form-data'
将解决问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.