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();

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

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

我无法确定这是我自己的代码的问题，还是本机本身的反应。任何帮助将不胜感激。

更新

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

一个最终被发送的请求的例子是：

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

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

Answer 1

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

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

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