JavaScript new XMLHttpRequest() 获取文件的大小和文件加载进度条

https://zinoui.com/blog/ajax-request-progress-bar

<template>
  <div style="padding:20px">
    <div @click="download">加载文件</div>
    <progress id="progress" value="" max=""></progress>
    <div id="progressBar_value"></div>
    <div id="progressBar_max"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return ({
      isSHow: false
    })
  },
  methods: {
    download() {
      var progressBar = document.getElementById("progress");
      var progressBar_value = document.getElementById("progressBar_value");
      var progressBar_max = document.getElementById("progressBar_max");

      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/good4/1.jpg?" + Math.floor(Math.random() * 99999), true);
      xhr.responseType = "text";
      xhr.onprogress = function (e) {
        console.log(e)
        if (e.lengthComputable) {
          progressBar.max = e.total;
          progressBar.value = e.loaded;
          progressBar_value.innerHTML = `${(e.loaded / 1024 / 1024).toFixed(3)}MB`;
          progressBar_max.innerHTML = `${(e.total / 1024 / 1024).toFixed(3)}MB`;
        }
      };
      xhr.onloadstart = function (e) {
        progressBar.value = 0;
      };
      xhr.onloadend = function (e) {
        progressBar.value = e.loaded;
      };
      xhr.send(null);
    }
  }
}
</script>