如何使用fetch()和WhatWG流来获取文件上载进度

Question

注意:我不是在寻找任何替代方案.我知道这可以通过XMLHttpRequest来完成.我也不关心浏览器支持.我只想了解新的/即将推出的标准.

我有一个  File对象,我可以使用像这样的fetch上传它:

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

如何从中获取上传进度？

据我所知body,fetch选项可以是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中删除的,因为它有自己的实现/建议.