向 API 请求 formData，上传图片时 axios 出现“网络错误”

Question

我正在向服务器发出 POST 请求以上传图像并在 react-native 中使用 axios 发送表单数据。我收到“网络错误”。我也尝试 fetch 但没有任何效果。使用 react native image picker libeary 选择 image.in postman 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

我面临的问题与您提到的问题很接近，是我在使用图像选择器并尝试使用 axios 上传文件时遇到 NetworkError 。它在 iOS 中完美运行，但在 Android 中却无法运行。

\n

这就是我解决问题的方法。

\n

这里有两个独立的问题在起作用。让\xe2\x80\x99s 说我们从图像选择器获取imageUri，然后我们将使用以下代码行从前端上传。

\n

const formData = new FormData();\nformData.append(\'image\', {\n uri : imageUri,\n type: "image",\n name: imageUri.split("/").pop()\n});\n

\n

第一个问题与 imageUri 本身有关。如果让\xe2\x80\x99s 说照片路径是/user/.../path/to/file.jpg。然后，Android 中的文件选择器会将 imageUri 值指定为 file:/user/.../path/to/file.jpg，而 iOS 中的文件选择器会将 imageUri 值指定为 file:///user/.../path/to /文件.jpg。

\n

第一个问题的解决方案是在android中的formData中使用file://而不是file:。

\n

第二个问题是我们没有使用正确的哑剧类型。它在 iOS 上运行良好，但在 Android 上则不行。更糟糕的是文件选择器包给出的文件类型为 \xe2\x80\x9cimage\xe2\x80\x9d 并且它没有给出正确的 mime 类型。

\n

解决方案是在字段类型的 formData 中使用正确的 mime-type。例如：.jpg 文件的 mime 类型为 image/jpeg，.png 文件的 mime 类型为 image/png。我们不必手动执行此操作。相反，您可以使用一个非常著名的 npm 包，称为mime。

\n

最终的工作解决方案是：

\n

import mime from "mime";\n\nconst newImageUri =  "file:///" + imageUri.split("file:/").join("");\n\nconst formData = new FormData();\nformData.append(\'image\', {\n uri : newImageUri,\n type: mime.getType(newImageUri),\n name: newImageUri.split("/").pop()\n});\n

\n

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

\n

Answer 2

项目将flipper java 文件保存在app > source > debug in react native > 0.62 下。Flipper Network 存在问题，导致您的情况出现问题。如果删除调试文件夹，您将无法使用 Flipper 调试 Android，因此最好的解决方案是将 android > gradle.properties 中的 Flipper 版本升级到 0.46.0 以解决问题。

你可以用这一行改变它 FLIPPER_VERSION=0.46.0

反应原生安卓

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

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

1. 更新 FLIPPER_VERSION=0.52.0 最新
2. 为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 5

就我而言，解决方案是更改为

常量标头 = {
    接受：'应用程序/json'，
    '内容类型'：'多部分/表单数据'，
};

Answer 6

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

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

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