reactjs - 使用 Fetch API 和 cross-fetch polyfill 在文件输入更改时上传文件

Question

我将 Fetch API 与交叉获取 polyfill 一起使用 https://www.npmjs.com/package/cross-fetch

在 SO 上放屁几个小时，试图使用它上传文件。无论我做什么，我似乎都无法避免“不支持的 BodyInit 类型”错误。

<input
    name="file"
    type="file"
    onChange={event => {
      event.preventDefault();
      var f = event.target.files[0];
      var data = new FormData();
      data.append("file", f);

      fetch("/my-api", {
        method: "POST",
        body: data
      });
    }}
  />

这是一个可运行的例子:https://codesandbox.io/s/v08lpj24wy

当然，我不会直接在 onChange 处理程序中执行此类操作，但该示例说明了错误。我做错了什么？

Answer 1

事实证明，您的 import fetch from "cross-fetch" 通过破坏 blob 和 FormData 的解析来错误地填充提取。只需删除导入并查看一切正常。