android - react native 博览会 : Network error on android

Question

我在我的应用程序中使用 axios。当我在打开应用程序后第一次发出帖子请求时，它失败并出现以下错误。从第二次开始，它可以正常工作。

Network Error
- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/adapters/xhr.js:81:22 in handleError
- node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:600:10 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:395:6 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

我正在通过 http://my_ip:my_port/连接到真实服务器的真实 android 设备上运行。我通过在 kotlin 中创建 native android 项目来尝试相同的发布请求，并且它可以正常工作
这是我的代码:

const upload = () => {
    setAnalyzing(true);

    axios.post(URL_PREDICT, formBody(), {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(handleSuccess)
      .catch(handleFail);
  }

  const formBody = () => {
    const photo = {
      uri: image,
      type: 'image/jpeg',
      name: 'photo.jpg',
    };
    const form = new FormData();
    form.append("file", photo);
    return form;
  };

  const handleFail = (error) => {
    console.log(error)
    console.log(error?.response?.data);
    setAnalyzing(false);
    toggle();
    alert("ERROR " + error);
  };

  const handleSuccess = response => {
    console.log('success...');
    setAnalyzing(false);
    toggle();
    console.log(response);
    navigation.navigate('Result', response);
  };

知道是什么原因造成的吗？

Answer 1

我认为您正在使用 expo-image-picker .
这里有两个独立的问题在起作用。假设我们得到 imageUri来自 image-picker ，然后我们将使用以下这些代码行从前端上传。

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 .
第一个问题的解决方案是使用 file://而不是 file:在android中的formData中。
第二个问题是我们没有使用正确的 mime-type .它在 iOS 上运行良好，但在 Android 上却不行。更糟糕的是，文件选择器包将文件类型指定为“图像”，并且没有提供正确的 mime 类型。
解决方法是使用正确的 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()
});