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

【问题标题】：Using Fetch API with cross-fetch polyfill to upload file on file-input change使用 Fetch API 和 cross-fetch polyfill 在文件输入更改时上传文件
【发布时间】：2018-07-30 06:31:44
【问题描述】：

我正在使用 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 处理程序中执行此类操作，但该示例说明了错误。我做错了什么？

【问题讨论】：

标签： reactjs redux react-redux fetch-api

【解决方案1】：

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

【讨论】：

wtf！我会提出问题

【解决方案2】：

fetch 返回一个承诺。在您致电 then

之前，它不会执行任何操作

编辑

如果您使用 Request 对象调用 fetch，则错误消失

var req = new Request("/my-api", {
          method: "POST",
          body: data
        });

fetch(req)
    .then(() => console.log("ok"))
    .catch(() => console.error("not ok"));

【讨论】：

它甚至没有那么远......看看可运行的例子。
我做了，但忘记检查浏览器控制台，只看到codeandbox的那个。我得到了修复

【解决方案3】：

实际上，这是 github 的 fetch 的问题，cross-fetch 用于在浏览器环境中获取。 http://github.com/github/fetch/issues/601

您不能直接将文件作为正文传递。你必须采取第二种方法通过将其包装在 FormData 中。将 FormData 传递给 body 时，您不得为请求设置任何 Content-Type 标头。相反，浏览器会选择合适的 multipart/form-data 值。

【讨论】：