fetch上传文件进度条

fetch API 并不支持上传文件的进度条,因为它直接暴露了浏览器的网络层,不对请求的数据进行处理。

如果您需要在上传文件时显示进度条,您可以使用 XMLHttpRequest 对象。它提供了一个 progress 事件,该事件在上传数据时会不断触发,并将当前上传进度作为参数发送。

下面是一个使用 XMLHttpRequest 上传文件并显示进度条的示例:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/upload', true);
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% uploaded');
xhr.onload = function() {
  if (this.status == 200) {
    console.log('Upload complete');
var formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.send(formData);
  •