无法从 React Native 上传文件："Network request failed"？

Question

当我尝试从我的 React Native 项目上传选定的图像时，我收到一条难以描述的错误消息：

Network request failed

这似乎是一个常见问题，但大多数人只是忘记了他们的文件类型或者在 Android 上并且遇到了 Flipper 问题。对我发现的具有相同症状的任何人都没有用。

代码：

  const localUri = result.uri;
  const filename = localUri.split("/").pop();

  const type = mime.lookup(localUri) || "image";

  const formData = new FormData();
  formData.append("file", { uri: localUri, name: filename, type });

  try {
    const file = await fetch(`${SERVER_URL}/api/upload`, {
      method: "POST",
      body: formData,
    }).then((res) => {
      console.log(res);
      return res.status === 200 ? res.text() : res.json();
    });
  } catch (e) {
    console.log(e);
  }

注意事项：

使用物理 IOS 设备。 Iphone.
使用 Expo 40.0.0 和相应的 RN SDK，未弹出。
使用expo-image-picker获取图像。
使用 NGROK 将请求从我的 phone.
React Native 对我的服务器的所有其他请求都工作正常，只有当我尝试上传文件时才会出现这种情况
图像可以从提供的 URI 中很好地呈现，因此它获得了正确的来源。
上面的表单数据源：

{ "name": "CAPS-FILE-NAME.jpg", "type": "image/jpeg", "uri": "file:///var/mobile/Containers/Data/Application/CAPS-PATHING/Library/Caches/ExponentExperienceData/project-src-pathing/ImagePicker/CAPS-FILE-NAME.jpg", }

尝试过的事情：

使用 Content-Type header：“multipart/form-data”
使用 /private 代替 file://
使用 Postman 通过 NGROK 访问我的服务器，有效
正在将我的 Expo/RN 更改为 38.0.0
正在获取 base64 -> blob -> formData，结果相同
我现在忘记了许多其他事情。如果它在 Google 结果上，我已经尝试过了。

Answer 1

对于任何也遇到此问题的人，我转而使用 XMLHttpRequest 而不是 fetch，它现在奇迹般地工作了。不确定为什么在 RN 中 fetch 被破坏，但至少有一个解决方案。

无法从 React Native 上传文件："Network request failed"？

Cannot upload file from React Native: "Network request failed"?

react-native

expo

react-native-android

react-native-ios