fetch请求图片获取图片的大小和blob数据

<template>
  <div id="progressBar_max"></div>
</template>

<script>
export default {
  created: function () {
    this.test()
  },
  methods: {
    async test() {
      let response = await fetch('good4/test/1.jpg');

      let blob = await response.blob(); // 下载为 Blob 对象
      const progressBar_max = document.getElementById("progressBar_max");

      progressBar_max.innerHTML = `${(blob.size / 1024 / 1024).toFixed(3)}MB`;

      // 为其创建一个 <img>
      let img = document.createElement('img');
      img.style = 'width:100px';
      document.body.append(img);

      // 显示它
      img.src = URL.createObjectURL(blob);

    },
  }
}
</script>

https://zh.javascript.info/fetch