Question

注意：我没有寻找任何替代方法。我知道可以使用XMLHttpRequest完成。我也不在乎浏览器的支持。我只想了解新标准/即将推出的标准。

我有一个File对象，可以使用如下所示的抓取方式通过PUT上传它：

fetch(url, {
    method: "PUT",
    body: fileObject,
});

如何从中获取上传进度？

据我了解，提取选项中的body可以是ReadableStream。那么也许有一种方法可以将File对象包装到ReadableStream并从中获取进度状态？

例如。像这样

fetch(url, {
    method: "PUT",
    body: asReadableStream(fileObject, onProgress),
});

谢谢。

Answer 1

正如Kyle所说，还不支持ReadableStream上传。 https://github.com/whatwg/fetch/issues/95

即使有可能，我也不会尝试通过流监视上传进度（也就是说，FetchObserver变成了一件事情），现在没人在处理它。但是Mozilla提出了一个看起来像这样的提议。

/*
enum FetchState {
  // Pending states
  "requesting", "responding",

  // Final states
  "aborted", "errored", "complete"
};
*/

fetch(url, {
  observe(observer) { 
    observer.onresponseprogress = e => console.log(e);
    observer.onrequestprogress = e => console.log(e);
    observer.onstatechange = n => console.log(observer.state)
  }
)

我记得很久以前我使用一些实验性标志对其进行了测试，但由于找不到演示，所以他们将其从MDN中删除了，因为它是存在的实现/建议。

Answer 2

简短的回答：目前无法完成。

在此处查看规格：https://fetch.spec.whatwg.org/#fetch-api

第二句话表明，使用提取时无法跟踪请求进度。

fetch（）方法是用于获取资源的相对较低级别的API。它覆盖的范围比XMLHttpRequest略多，尽管它当前缺少请求进展（没有响应）进度）。

如何使用fetch（）和WhatWG流获得文件上传进度

2 个答案: