上传进度指示器以获取？

Question

我正在努力寻找使用 fetch 实现上传进度指示器的文档或示例。

这是迄今为止我找到的唯一参考资料，其中指出：

进度事件是一个高级功能，目前无法获取。您可以通过查看 Content-Length 标头并使用传递流监控接收到的字节来创建自己的。

这意味着您可以在没有 Content-Length 的情况下以不同的方式显式处理响应。当然，即使 Content-Length 是否存在，也可能是谎言。使用流，您可以随心所欲地处理这些谎言。

我将如何编写发送的“用于监视字节的直通流”？如果它有任何区别，我正在尝试这样做以将图像从浏览器上传到 Cloudinary 。

注意：我对 Cloudinary JS 库 不 感兴趣，因为它依赖于 jQuery 而我的应用程序不依赖。我只对使用本机 javascript 和 Github 的 fetch 执行此操作所需的流处理感兴趣。

---

https://fetch.spec.whatwg.org/#fetch-api

原文由 neezer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

流开始登陆网络平台（ https://jakearchibald.com/2016/streams-ftw/ ），但仍处于早期阶段。

很快您将能够提供一个流作为请求的主体，但悬而未决的问题是该流的消耗是否与上传的字节有关。

特定的重定向可能导致数据被重新传输到新位置，但流不能“重新启动”。我们可以通过将主体转换为可以多次调用的回调来解决这个问题，但我们需要确保暴露重定向的数量不是安全漏洞，因为这将是平台上的第一次 JS 可以检测到。

有些人质疑将流消耗与上传的字节联系起来是否有意义。

长话短说：这还不可能，但将来这将由流处理，或者某种更高级别的回调传递给 fetch() 。

原文由 JaffaTheCake 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我的解决方案是使用 axios ，它很好地支持了这一点：

 axios.request({
    method: "post",
    url: "/aaa",
    data: myData,
    onUploadProgress: (p) => {
      console.log(p);
      //this.setState({
          //fileprogress: p.loaded / p.total
      //})
    }
}).then (data => {
    //this.setState({
      //fileprogress: 1.0,
    //})
})

我有在 github 上使用它的例子。

原文由 dwjohnston 发布，翻译遵循 CC BY-SA 4.0 许可协议