Question

我正在向服务器发出POST请求，以上传图像并使用react-native中的axios发送formdata。我收到“网络错误”。我也尝试获取，但没有任何效果。使用react native image picker libeary选择图片。在邮递员api中工作正常

        formData.append('title', Title);
        formData.append('class_id', selectClass._id)
        formData.append('subject_id', checkSelected)
        formData.append('teacher_id', userId)
        formData.append('description', lecture);
        formData.append('type', 'image');

       var arr=[];
       arr.push(imageSource)
       arr.map((file,index)=>{
       formData.append('file',{
       uri:file.path,
       type:file.type,
       name:file.name
       })
       })


       axios({
       method: 'post',
       url: URL + 'admin/assignment/create',
       data: data,
       headers: {
       "content-type": "multipart/form-data",
       'x-auth-token': token,
        },
       })
     .then(function (response) {
    //handle success
    console.log('axios assigment post',response);
      })
   .catch(function (response) {
     //handle error
      console.log('axios assigment post',response);
    });

Answer 1

项目在应用程序>源>调试下的本地Java> 0.62中保留脚蹼Java文件。 Flipper Network出现问题，导致您遇到的问题。如果删除debug文件夹，将无法使用Flipper调试Android，因此最好的解决方案是将android> gradle.properties中的Flipper版本升级到0.46.0，以解决此问题。

您可以在此行中进行更改 FLIPPER_VERSION=0.46.0

react-native android

Answer 2

我遇到了同样的问题。以下步骤对我有用。

更新FLIPPER_VERSION = 0.52.0最新
对于formData代码如下：

let formData = new FormData();
let file = {
          uri: brand.uri, 
          type: 'multipart/form-data', 
          name: brand.uri
};
formdata.append('logo', file);

类型必须为“ multipart / form-data”作为帖子标题。

Answer 3

反应本地解决方案

如果您在Axios中使用Fetch或React Native，并且在上传文件或数据时得到Network Error。

尝试从commenting到行/android/app/src/main/java/com/{your_project}/MainApplication.java

它位于40-50行附近

initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

https://github.com/facebook/react-native/issues/28551

Answer 4

“ react-native”：“ 0.62.1”， “反应”：“ 16.11.0”， “ axios”：“ ^ 0.19.2”，

奇怪的解决方案，我必须删除调试文件夹在android-> app-> source-> debug

，然后重新启动应用程序它解决了我的问题。我认为这是缓存问题。

Answer 5

我遇到了这个问题，并通过注释第43行来解决 android / src / debug /.../.../ ReactNativeFlipper.java

# quote() - Creates a shell literal
# Usage:  printf '%s\n' "$( quote "..." "..." "..." )"
quote() {
    local prefix=''
    local p
    for p in "$@" ; do
        printf "$prefix"\'
        printf %s "$p" | sed "s/'/'\\\\''/g"
        printf \'
        prefix=' '
    done
}

可以测试吗？

Answer 6

我面临的与您提到的问题相近的问题是，我在使用图像选择器并尝试使用 axios 上传文件时遇到了 NetworkError。它在 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 类型。它在 iOS 上运行良好，但在 Android 上运行不正常。更糟糕的是，file-picker 包将文件类型指定为“图像”，而没有提供正确的 MIME 类型。

解决方案是在字段类型的formData中使用适当的mime-type。例如：.jpg 文件的 mime-type 是 image/jpeg，而 .png 文件的 mime-type 是 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()
});

我希望这有助于解决您的问题:)

Answer 7

我最近将我的 Flipper 更新到了新版本，并且运行良好。

版本在 gradle.properties 文件中定义

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.83.0

更改flipper版本后，请务必清理android文件夹中的项目。

./gradlew clean

@Mahmonir Bakhtiyari 提出的解决方案是一种解决方法，如果您无法更新您的 Flipper 版本，因为 Flipper 中的网络调试器将停止工作。

#### android/src/debug/.../.../ReactNativeFlipper.java

//builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

更多信息可以在以下问题中找到：

https://github.com/facebook/flipper/issues/993

https://github.com/facebook/react-native/issues/28551

Answer 8

更改这一行：form_data.append('file', data);

到 form_data.append('file', 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 文件中

然后，由于 Flipper Network 的问题。

我评论了 initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中 /android/app/src/main/java/com/{your_project}/MainApplication.java

另外，注释掉这个文件 android/app/src/debug/java/com/**/ReactNativeFlipper.java 中的第 43 行

line43: builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

Answer 9

如果使用 b'V' 和 expo，则问题仅在于图像类型而没有其他问题。

在最新的更新中，他们删除了与路径相关的错误（其他答案提到更改路径的开头，这对于旧版本是正确的）。

现在要解决这个问题，我们只需要更改类型，其他答案中提到使用 mime 工作正常；

expo-image-picker

向API请求formData，在上传图片时在axios中获取“网络错误”

9 个答案: