上传进度指示器以进行抓取？

javascript html fetch-api

2022-08-30 02:13:18

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

进度事件是一个高级功能，暂时不会到达 fetch 中。您可以通过查看标头并使用直通流来监视接收的字节来创建自己的标头。Content-Length

这意味着您可以显式处理响应，而无需其他方式。当然，即使在那里，也可能是谎言。使用流，您可以根据需要处理这些谎言。Content-LengthContent-Length

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

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

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

答案 1

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

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

特定的重定向可能导致数据重新传输到新位置，但流无法“重新启动”。我们可以通过将 body 转换为可以多次调用的回调来解决此问题，但是我们需要确保公开重定向的数量不是安全泄漏，因为这是 JS 第一次检测到这一点。

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

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

答案 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上的react中使用它的例子。