AJAX上传下载进度监控完全攻略(适合新手)

const xhr = new xmlhttprequest();
xhr.open('post', '/upload');

// 上传进度监控
xhr.upload.onprogress = function(e) {
  if (e.lengthcomputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度: ${percent}%`);
  }
};

// 下载进度监控
xhr.onprogress = function(e) {
  if (e.lengthcomputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`下载进度: ${percent}%`);
  }
};

xhr.send(formdata);

fetch('/download')
  .then(response => {
    const reader = response.body.getreader();
    const contentlength = +response.headers.get('content-length');
    let receivedlength = 0;

    return new promise((resolve, reject) => {
      function processchunk({ done, value }) {
        if (done) {
          resolve();
          return;
        }
        receivedlength += value.length;
        console.log(`下载进度: ${(receivedlength/contentlength)*100}%`);
        return reader.read().then(processchunk);
      }
      reader.read().then(processchunk);
    });
  });

axios.post('/upload', formdata, {
  onuploadprogress: progressevent => {
    const percent = math.round(
      (progressevent.loaded * 100) / progressevent.total
    );
    console.log(`上传进度: ${percent}%`);
  },
  ondownloadprogress: progressevent => {
    const percent = math.round(
      (progressevent.loaded * 100) / progressevent.total
    );
    console.log(`下载进度: ${percent}%`);
  }
});

<div class="progress-bar">
  <div class="progress" style="width: 0%"></div>
</div>

<script>
function updateprogressbar(percent) {
  document.queryselector('.progress').style.width = `${percent}%`;
}
</script>

// 上传时添加range头
headers: {
  'range': `bytes=${resumebyte}-`
}

// 服务器响应206 partial content

xhr.onerror = function() {
  console.error('传输失败');
};

fetch().catch(error => {
  console.error('请求失败:', error);
});