上传进度指示器以获取？

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

这是我到目前为止找到的唯一参考，其中指出：

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

这意味着您可以显式地处理响应，而无需进行Content-Length其他操作。当然，即使Content-Length存在，也可能是谎言。使用流，您可以根据需要处理这些谎言。

我将如何编写发送的“用于监视字节的直通流”？如果有什么不同，我正在尝试执行此操作以增强从浏览器到Cloudinary的图像上传。

注意：我对Cloudinary JS库不感兴趣，因为它取决于jQuery，而我的应用程序则不需要。我只对使用本机javascript和Github的polyfill 进行流处理所必需的感兴趣。fetch

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

流开始在Web平台（https://jakearchibald.com/2016/streams-ftw/）上登陆，但仍处于初期。

很快您就可以提供流作为请求的主体，但是悬而未决的问题是该流的消耗是否与上载的字节有关。

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

有人质疑将流消耗链接到上载的字节是否有意义。

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

我的解决方案是使用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中使用此示例。

我认为不可能。草案指出：

[ 与XHR相比 ] 当前缺少请求进度

（旧答案）：Fetch API章节中
的第一个示例提供了有关如何执行以下操作的一些见解：

如果要逐步接收身体数据：

function consume(reader) {
  var total = 0
  return new Promise((resolve, reject) => {
    function pump() {
      reader.read().then(({done, value}) => {
        if (done) {
          resolve()
          return
        }
        total += value.byteLength
        log(`received ${value.byteLength} bytes (${total} bytes in total)`)
        pump()
      }).catch(reject)
    }
    pump()
  })
}

fetch("/music/pk/altes-kamuffel.flac")
  .then(res => consume(res.body.getReader()))
  .then(() => log("consumed the entire body without keeping the whole thing in memory!"))
  .catch(e => log("something went wrong: " + e))

除了他们使用Promise构造函数反模式之外，您还可以看到这response.body是一个Stream，可以使用Reader逐字节读取该Stream，并且可以为每个事件触发一个事件或执行任何您想做的事情（例如记录进度）。

但是，Streams规范似乎还不够完善，我也不知道它是否已经在任何提取实现中起作用。

更新：正如公认的答案所说，现在不可能了。但是下面的代码一段时间解决了我们的问题。我应该补充一点，至少我们必须切换到使用基于XMLHttpRequest的库。

const response = await fetch(url);
const total = Number(response.headers.get('content-length'));

const reader = response.body.getReader();
let bytesReceived = 0;
while (true) {
    const result = await reader.read();
    if (result.done) {
        console.log('Fetch complete');
        break;
    }
    bytesReceived += result.value.length;
    console.log('Received', bytesReceived, 'bytes of data so far');
}

感谢此链接：https : //jakearchibald.com/2016/streams-ftw/

由于没有答案能解决问题。

仅出于实现目的，您可以使用一些已知大小的初始小块来检测上载速度，并且可以使用content-length / upload-speed来计算上载时间。您可以将此时间用作估算值。

一个可能的解决方法是利用new Request()构造函数然后检查Request.bodyUsed Boolean属性

该bodyUsed属性的getter方法必须返回true，如果disturbed，否则为假。

确定流是否为 distributed

实现Bodymixin 的对象被称为disturbedif if body为非null，其stream为is disturbed。

返回fetch() Promise从内部.then()链接到递归.read()的呼叫ReadableStream时，Request.bodyUsed等于true。

请注意，由于Request.body字节流传输到端点，因此该方法不会读取的字节。同样，在任何响应完全返回到浏览器之前，上传就可以完成。

const [input, progress, label] = [
  document.querySelector("input")
  , document.querySelector("progress")
  , document.querySelector("label")
];

const url = "/path/to/server/";

input.onmousedown = () => {
  label.innerHTML = "";
  progress.value = "0"
};

input.onchange = (event) => {

  const file = event.target.files[0];
  const filename = file.name;
  progress.max = file.size;

  const request = new Request(url, {
    method: "POST",
    body: file,
    cache: "no-store"
  });

  const upload = settings => fetch(settings);

  const uploadProgress = new ReadableStream({
    start(controller) {
        console.log("starting upload, request.bodyUsed:", request.bodyUsed);
        controller.enqueue(request.bodyUsed);
    },
    pull(controller) {
      if (request.bodyUsed) {
        controller.close();
      }
      controller.enqueue(request.bodyUsed);
      console.log("pull, request.bodyUsed:", request.bodyUsed);
    },
    cancel(reason) {
      console.log(reason);
    }
  });

  const [fileUpload, reader] = [
    upload(request)
    .catch(e => {
      reader.cancel();
      throw e
    })
    , uploadProgress.getReader()
  ];

  const processUploadRequest = ({value, done}) => {
    if (value || done) {
      console.log("upload complete, request.bodyUsed:", request.bodyUsed);
      // set `progress.value` to `progress.max` here 
      // if not awaiting server response
      // progress.value = progress.max;
      return reader.closed.then(() => fileUpload);
    }
    console.log("upload progress:", value);
    progress.value = +progress.value + 1;
    return reader.read().then(result => processUploadRequest(result));
  };

  reader.read().then(({value, done}) => processUploadRequest({value,done}))
  .then(response => response.text())
  .then(text => {
    console.log("response:", text);
    progress.value = progress.max;
    input.value = "";
  })
  .catch(err => console.log("upload error:", err));

}

const req = await fetch('./foo.json');
const total = Number(req.headers.get('content-length'));
let loaded = 0;
for await(const {length} of req.body.getReader()) {
  loaded = += length;
  const progress = ((loaded / total) * 100).toFixed(2); // toFixed(2) means two digits after floating point
  console.log(`${progress}%`); // or yourDiv.textContent = `${progress}%`;
}

关键部分是ReadableStream « obj_response .body»。

样品：

let parse=_/*result*/=>{
  console.log(_)
  //...
  return /*cont?*/_.value?true:false
}

fetch('').
then(_=>( a/*!*/=_.body.getReader(), b/*!*/=z=>a.read().then(parse).then(_=>(_?b:z=>z)()), b() ))

您可以在一个巨大的页面上测试运行它，例如https://html.spec.whatwg.org/和https://html.spec.whatwg.org/print.pdf。CtrlShiftJ并加载代码。

（已在Chrome上测试。）