ajax监控文件上传进度

浏览器前端实现：

const input = document.querySelector('input');

const btn = document.querySelector('#button');

btn.addEventListener('click', async (e) => {

  var xhr = new XMLHttpRequest();

  var file = input.files[0];

  // 监听上传进度事件
  xhr.upload.addEventListener('progress', function (event) {
    if (event.lengthComputable) {
      // 计算上传进度
      var percentComplete = event.loaded / event.total * 100;
      // 根据想要的样式，告知用户进度
      console.log('上传进度：' + percentComplete + '%');
    }
  });

  // 监听上传完成事件
  xhr.addEventListener('load', function (event) {
    console.log('上传完成');
  });

  // 监听上传出错事件
  xhr.addEventListener('error', function (event) {
    console.log('上传出错');
  });
  
  // 监听状态变化事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var response = xhr.responseText;
        console.log('响应的数据：' + response);
      } else {
        console.log('请求出错：' + xhr.status);
      }
    }
  };

  // 发送请求
  xhr.open('POST', '/send-ajax', true);
  xhr.setRequestHeader('Content-Type', 'image/png');
  xhr.send(file);

}