我正在努力寻找使用fetch实现上传进度指示器的文档或示例。
这是迄今为止我找到的唯一参考，其中指出：
进度事件是一项高级功能，目前不会在 fetch 中到达。您可以通过查看
Content-Length标头并使用传递流来监视接收到的字节来创建自己的标头。这意味着您可以明确地处理响应而没有
Content-Length不同。当然，即使Content-Length存在也可能是谎言。通过流，您可以随心所欲地处理这些谎言。
我将如何编写“用于监视字节的传递流”发送？如果它有任何不同，我正在尝试这样做以支持从浏览器到Cloudinary 的图像上传。
注意：我对Cloudinary JS 库不感兴趣，因为它依赖于 jQuery 而我的应用程序没有。我只对使用原生 javascript 和 Github 的polyfill执行此操作所需的流处理感兴趣。fetch
Streams 开始登陆网络平台 ( https://jakearchibald.com/2016/streams-ftw/ )，但仍为时尚早。
很快您就可以提供一个流作为请求的主体，但悬而未决的问题是该流的消耗是否与上传的字节有关。
特定的重定向可能会导致数据重新传输到新位置，但流无法“重新启动”。我们可以通过将主体转换为可以多次调用的回调来解决这个问题，但是我们需要确保暴露重定向次数不是安全漏洞，因为这是平台上的第一次 JS 可以检测到。
有些人质疑将流消耗与上传的字节数联系起来是否有意义。
长话短说：这还不可能，但将来这将通过流或某种更高级别的回调传递到fetch().
更新：正如接受的答案所说，现在不可能了。但下面的代码处理了我们的问题一段时间。我应该补充一点，至少我们必须切换到使用基于 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');
}
这听起来像上传进度，最终有可能与取一次它支持ReadableStream作为body。这目前尚未实施，但正在进行中。我认为代码看起来像这样：
警告：此代码尚未生效，仍在等待浏览器支持
async function main() {
const blob = new Blob([new Uint8Array(10 * 1024 * 1024)]); // any Blob, including a File
const progressBar = document.getElementById("progress");
const totalBytes = blob.size;
let bytesUploaded = 0;
const blobReader = blob.stream().getReader();
const progressTrackingStream = new ReadableStream({
async pull(controller) {
const result = await blobReader.read();
if (result.done) {
console.log("completed stream");
controller.close();
return;
}
controller.enqueue(result.value);
bytesUploaded += result.value.byteLength;
console.log("upload progress:", bytesUploaded / totalBytes);
progressBar.value = bytesUploaded / totalBytes;
},
});
const response = await fetch("https://httpbin.org/put", {
method: "PUT",
headers: {
"Content-Type": "application/octet-stream"
},
body: progressTrackingStream,
});
console.log("success:", response.ok);
}
main().catch(console.error);upload: <progress id="progress" />代替fetch()，可以使用 XMLHttpRequest 来跟踪上传进度——该xhr.upload对象发出一个progress事件。
async function main() {
const blob = new Blob([new Uint8Array(10 * 1024 * 1024)]); // any Blob, including a File
const uploadProgress = document.getElementById("upload-progress");
const downloadProgress = document.getElementById("download-progress");
const xhr = new XMLHttpRequest();
const success = await new Promise((resolve) => {
xhr.upload.addEventListener("progress", (event) => {
if (event.lengthComputable) {
console.log("upload progress:", event.loaded / event.total);
uploadProgress.value = event.loaded / event.total;
}
});
xhr.addEventListener("progress", (event) => {
if (event.lengthComputable) {
console.log("download progress:", event.loaded / event.total);
downloadProgress.value = event.loaded / event.total;
}
});
xhr.addEventListener("loadend", () => {
resolve(xhr.readyState === 4 && xhr.status === 200);
});
xhr.open("PUT", "https://httpbin.org/put", true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send(blob);
});
console.log("success:", success);
}
main().catch(console.error);upload: <progress id="upload-progress"></progress><br/>
download: <progress id="download-progress"></progress>我不认为这是可能的。草案指出：
在请求进度方面，它目前缺乏 [与 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构造函数 antipattern的使用之外，您可以看到这response.body是一个 Stream，您可以使用 Reader 从中逐字节读取，并且您可以触发事件或为每个人做任何您喜欢的事情（例如记录进度）。
然而，Streams 规范似乎还没有完全完成，我不知道这是否已经在任何 fetch 实现中起作用。