[英]React native 0.62.0 - Network request error on Android for file upload
I have upgraded react-native to 0.62 and i got the problem of Network error for Android only, iOS works fine.我已将 react-native 升级到 0.62,但我遇到了仅适用于 Android 的网络错误问题,iOS 工作正常。
I use FormData object to populate data formated as我使用 FormData 对象来填充格式为
const data = new FormData();
// On Android i add file protocol to file path - file://...
data.append('photos', {
uri: 'file:///data/.../my-image.jpeg',
type: 'image/jpeg',
name: 'my-image.jpeg'
});
and other textual data和其他文本数据
data.append('description', 'my long description...');
Does anyone have the problem?有人有问题吗?
I have tried multiple Android SDKs 27, 28, 29, and got same problem on all :(我已经尝试了多个 Android SDK 27、28、29,但都遇到了同样的问题:(
The things is if i do not upload images, but only textual data request works just fine :(问题是如果我不上传图像,但只有文本数据请求工作得很好:(
Any suggestion welcome :)?欢迎任何建议:)?
It is happening because of Flipper network plugin.这是因为 Flipper 网络插件而发生的。 Comment line number 43 in the file
android/app/src/debug/java/com/<yourappname>/ReactNativeFlipper.java
注释文件
android/app/src/debug/java/com/<yourappname>/ReactNativeFlipper.java
38 NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39 NetworkingModule.setCustomClientBuilder(
40 new NetworkingModule.CustomClientBuilder() {
41 @Override
42 public void apply(OkHttpClient.Builder builder) {
43 // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44 }
45 });
46 client.addPlugin(networkFlipperPlugin);
In Flipper version 0.39.0 and above this problem was fixed.在 Flipper 0.39.0 及以上版本中,此问题已修复。 I've just update Flipper to version 0.40.0 and it working fine.
我刚刚将 Flipper 更新到 0.40.0 版,并且运行良好。
https://github.com/facebook/flipper/issues/993#issuecomment-619823916 https://github.com/facebook/flipper/issues/993#issuecomment-619823916
Posting this bec I made it work using react-native-ssl-pinning and react-native-image-crop-picker发布这个bec我使用react-native-ssl-pinning和react-native-image-crop-picker让它工作
FormData表单数据
file: {
uri: image.path,
type: image.mime,
name: 'image.jpg',
fileName: 'image.jpg',
size: image.size,
},
and the fetch和获取
fetch(url, {
method: 'POST',
sslPinning: { certs: ['cert'] },
body: {
formData: formData,
},
headers: {
Authorization:
'Bearer Token',
Accept: 'application/json; charset=utf-8',
'Content-type': 'multipart/form-data; charset=UTF-8',
},
})
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); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.