Reactjs 使用Fetch API和交叉Fetch polyfill在文件输入更改时上载文件

我正在使用带有交叉获取polyfill的获取API

为了让文件上传能用它工作，我在网上放屁了好几个小时。无论我做什么，我似乎都无法避免“unsupported BodyInit type”错误

<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
      });
    }}
  />

{
event.preventDefault（）；
var f=event.target.files[0]；
var data=new FormData（）；
数据。追加（“文件”，f）；
获取（“/myapi”{
方法：“张贴”，
正文：数据
});
}}
/>

下面是一个可运行的示例：

---

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

fetch

返回承诺。直到您调用

然后

编辑

如果使用

请求

对象调用

获取

，则错误消失

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

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

---

通过中断对blob和FormData的解析，您的

从“交叉提取”

导入提取错误地填充了提取。只需删除导入并确保一切正常。

实际上，这是github的fetch的一个问题，cross fetch使用它在浏览器环境中进行fetch

不能将文件直接作为正文传递。你必须采取第二种方法 通过将其包装在FormData中。将FormData传递给body时 不得为请求设置任何内容类型标头。相反 浏览器将选择适当的多部分/表单数据值

---

它甚至没有走那么远…看一看可运行的示例。我看了，但忘了检查浏览器控制台，只看到了codesandbox的一个。我得到了修正！我将提出一个问题