Question

我使用Fetch API和交叉提取polyfill https://www.npmjs.com/package/cross-fetch

在SO上放了几个小时试图让文件上传工作。无论我做什么，我似乎都无法避免不受支持的BodyInit类型＆＃39;错误。

<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

通过破解blob和FormData的解析，原来你的kaggle-cli填充错误。只需删除导入，看看一切正常。

Answer 2

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

之前，它没有做任何事情

修改

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

var req = new Request("/my-api", { method: "POST", body: data }); fetch(req) .then(() => console.log("ok")) .catch(() => console.error("not ok"));

Answer 3

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

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

使用带有交叉提取polyfill的Fetch API在文件输入更改时上传文件

3 个答案: