1. url -> blob -> file

url转blob 有两种方法分别是xhr方法和canvas方法

// url-->blob   xhr方法
export function urlToBlob(src: string) {
 if (src === '') return;
 const xhr = new XMLHttpRequest();
 let blob;
 xhr.open('GET', src);
 xhr.responseType = 'blob'; //二进制文件
 xhr.onload = function () {
 blob = this.response;
 return blob;
  };
 // xhr.onload((res) => {});
 xhr.send();
 console.log(xhr.response);
}

// url-->blob   canvas方法
// 根据地址（src）获取图片,生成img对象（标签）
export function getImg(src: string) {
 return new Promise((resolve, reject) => {
 const img = new Image();
 img.src = src;
 // 源图片允许跨域，否则canvas转base64时，toDataURL会报错
 img.setAttribute('crossOrigin', 'anonymous');
 img.onload = function () {
 resolve(img);
    };
  });
}

// 绘制图片并将canvas转为blob
export function canvasToBlob(img) {
 return new Promise((resolve, reject) => {
 const canvas = document.createElement('canvas');
 canvas.width = img.width;
 canvas.height = img.height;

 const ctx = canvas.getContext('2d');
 // 绘制原图（大小自己限制啦）
 ctx.drawImage(img, 0, 0);
 /* 转为blob对象 toBlob方法第一个参数是回调函数，第二个是图片格式默认值image/png，第三个为图片质量 */
 canvas.toBlob((blob) => {
 console.log('blob:', blob);
 resolve(blob);
 const url = URL.createObjectURL(blob);
 URL.revokeObjectURL(url);
    });
  });
}

转换为blob就可以获取字节数，然后转换为存储大小

export function getFileSize(size: number): ISize {
  //把字节转换成正常文件大小
  if (!size) return { res: 0, unit: '' };
  const num = 1024.0; //byte
  if (size < num) return { res: size, unit: 'B' };
  if (size < Math.pow(num, 2))
    return { res: Number((size / num).toFixed(2)), unit: 'KB' }; //kb
  if (size < Math.pow(num, 3))
    return { res: Number((size / Math.pow(num, 2)).toFixed(2)), unit: 'MB' }; //M
  if (size < Math.pow(num, 4))
    return { res: Number((size / Math.pow(num, 3)).toFixed(2)), unit: 'G' }; //G
  return { res: Number((size / Math.pow(num, 4)).toFixed(2)), unit: 'T' }; //T
}

2. url -> base64  -> file

   urlToBase64 () {
      let me = this
      // 获取图片的type
      let type = src.slice(src.lastIndexOf('.') + 1, src.length)
      var canvas = document.createElement('canvas');
      var img = document.createElement('img');
      // 设置可以跨域
      img.setAttribute('crossOrigin', 'anonymous')
      img.onload = function(e) {
          canvas.width = img.width;
          canvas.height = img.height;
          var context = canvas.getContext('2d');
          context.drawImage(img, 0, 0, img.width, img.height);
          document.body.append(canvas)
          let base64 = canvas.toDataURL('image/' + type)
          return base64
      }
      img.src = src;
   }

    //  base64 => file
    dataURLtoFile (dataurl, filename, src) {
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
          u8arr[n] = bstr.charCodeAt(n);
      }
      let file = new File([u8arr], filename, {type:mime});
      return file 
    },