axios 带有文件附加的表单发布抛出网络错误/ React Native + react native Image picker

kmynzznz 于 2023-04-11 发布在 iOS

关注(0)|答案(6)|浏览(151)

我正在使用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]

axios

来源：https://stackoverflow.com/questions/61046007/form-post-with-file-attach-throws-network-error-react-native-react-native-im

6条答案

按热度按时间

w8ntj3qf1#

Flipper有一个问题，升级到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

赞(0）回复(0）举报 2023-04-11

b91juud32#

这是flipper的问题。请将www.example.com中的flipper版本升级gradle.properties到0.43.0+，它将得到修复

赞(0）回复(0）举报 2023-04-11

gmxoilav3#

确保mime类型与您正在上传的文件匹配。对我来说，这是问题所在。

赞(0）回复(0）举报 2023-04-11

mzillmmw4#

我所面临的问题，这是接近你提到的是，我得到NetworkError时，使用expo-image-picker，并试图上传文件使用axios.它是在iOS完美工作，但不工作在Android.
这里有两个独立的问题。假设我们从image-picker获取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:。

第二个问题是我们没有使用正确的mime-type。它在iOS上工作正常，但在Android上却不行。更糟糕的是，文件选择器软件包将文件的类型指定为“image”，而它没有提供正确的mime-type。
解决方案是在type字段中的formData中使用适当的mime类型。例如：.jpg文件的mime类型为image/jpeg，.png文件的mime类型为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()
});

Original Answer - forums expo

赞(0）回复(0）举报 2023-04-11

svgewumm5#

更改此行：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”添加到目录android/app/src/main/AndroidManifest.xml中的AndroidManifest.xml文件
〈application... android：usesCleartextTraffic=“true”〉然后，由于问题与鳍状网络.
initializeFlipper（this，getReactNativeHost（）.getReactInstanceManager（））
在这个文件/android/app/src/main/java/com/{your_project}/MainApplication.java
另外，注解掉文件android/app/src/debug/java/com/**/ www.example.com中的第43行ReactNativeFlipper.java
line43：builder.addNetworkInterceptor（new FlipperOkhttpInterceptor（networkFlipperPlugin））;