React-Native FormData 文件请求作为 [object Object] 发送到服务器

Question

我目前使用的是 React Native 0.48 和 react-native-image-crop-picker 0.16。

我正在尝试获取文件 uri，并使用 FormData 和 Fetch 将其发送到服务器。

这是我正在做的代码片段：

var image = await ImagePicker.openPicker({
  width: 500,
  height: 500,
  cropping: true,
  includeBase64: true,
});

var media = {
  uri: image.path,
  type: 'image/jpeg',
  name: 'file.jpg',
};

var formData = new FormData();
formData.append("file", media);

fetch("https://requestb.in/1e6lgdo1", {
  method: 'post',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formData
}).then(function(r){
  console.log("Success", r);
}).catch(function(e){
  console.log("Error", e);
}).done();

不幸的是，当请求被发送到服务器而不是发送 "file" 表单数据字段中的文件内容时，它只是发送“[Object object]”。

根据您将请求发送到的位置，这会导致文件内容变为“[object Object]”或请求出错。

我无法确定这是我自己的代码的问题，还是 React Native 本身的问题。如有任何帮助，我们将不胜感激。

更新

我正在使用 https://github.com/jpillora/uploader 作为我的测试服务器。（注意：Go 在对对象进行字符串化时从不使用符号 [object Object]，所以我不认为问题出在服务器上。此外，我在将文件上传到 S3 时也看到了这一点。）

最终发出的请求示例是：

------WebKitFormBoundaryzt2jTR8Oh7dXB56z
Content-Disposition: form-data; name="file"

[object Object]
------WebKitFormBoundaryzt2jTR8Oh7dXB56z--

Answer 1

此问题与另一个包 React-Native Debugger 劫持获取请求有关，以便允许在调试器中进行检查。

有关解决方法的完整信息可在此处找到：https://github.com/jhen0409/react-native-debugger/issues/101

我能够通过返回 Google Chrome 调试器成功绕过它。

React-Native FormData 文件请求作为 [object Object] 发送到服务器

React-Native FormData File Requests being sent to the server as [object Object]

form-data

ios

reactjs

react-native

react-native-ios

更新