我正在使用react-native-image-picker获取图像详细信息并尝试上传到https后端服务器。 请求不成功，并引发网络错误。它没有建立与后端服务器的连接。问题出在我发送的formdata上。如果我错过了，您能否建议header和其他信息。
export const postImage = async state => {
let formData = new FormData();
formData.append('image', {
uri : state.photo.uri,
type: state.photo.type,
name : state.photo.fileName
});
const config = {
headers: {
'Content-Type': 'multipart/form-data',
Accept: "application/x-www-form-urlencoded",
'Accept': 'application/json'
},
};
try {
return $http.post('/image/save', formData, config)
.then(response => response)
.catch(error => error)
} catch(error) {
console.log(error)
}
}
环境：- Axios 版本 ^0.19.2 - 其他库版本 [React 16.11.0， React Native 0.62.1]
鳍状肢存在问题，将其升级到 0.39.0 及以上有效
此问题正在跟踪：https://github.com/facebook/react-native/issues/28551
修复： https://github.com/facebook/flipper/issues/993#issuecomment-619823916
This should be fixed in version 0.39.0. To upgrade, edit android > gradle.properties
# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.39.0 // edit this manually
这是鳍状肢的问题。将 gradle.properties 中的鳍状肢版本升级到 0.43.0+，它将被修复
确保 mime 类型与您正在上传的文件匹配。 对我来说，这是问题所在。
我面临的与您提到的问题很接近的是，在使用 expo-image-picker 并尝试使用axios上传文件时，我遇到了 NetworkError 。它在iOS中运行良好，但在Android中不起作用。
这里有两个独立的问题在起作用。假设我们从图像选择器获取imageUri，那么我们将使用以下代码行从前端上传。
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。
第一个问题的解决方案是在 android 的formData中使用file://而不是file:。
第二个问题是我们没有使用正确的哑剧类型。它在iOS上运行良好，但在Android上无法正常工作。更糟糕的是，文件选择器包将文件类型作为"图像"给出，并且没有给出正确的 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()
});
原答案 - 论坛博览会
更改此行：form_data.append('image'， data);
To form_data.append('image'， JSON.stringify(data));
其中数据来自图像选取器。
与 https://github.com/react-native-image-picker/react-native-image-picker/issues/798 相比
您需要将此uesCleartextTraffic="true"添加到dir android/app/src/main/AndroidManifest中的AndroidManifest.xml文件中.xml
<应用...android：usesCleartextTraffic>然后，因为Flipper Network的问题。
我评论了initializeFlipper(this， getReactNativeHost().getReactInstanceManager())
在此文件中/android/app/src/main/java/com/{your_project}/MainApplication.java
另外，注释掉此文件中的第 43 行 android/app/src/debug/java/com/**/ReactNativeFlipper.java
line43： builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
其他答案中的问题都没有导致我的问题，但是在深入研究了Axios错误响应之后，我发现Nginx正在以错误413 Request Entity Too Large响应。
将client_max_body_size 50M添加到nginx.conf文件的 http 部分解决了这个问题。