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

Question

我将 Fetch API 与 cross-fetch 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 的解析，您正在错误地进行填充提取。只需删除导入并查看一切正常。