菜鸟成长记08 计算base64格式图片大小

何泽丰

rookie growth record

发布于：Jul 30, 2020

前言：我们在使用vant uploader组件的时候，除了需要校验单张图片上传大小，有时候还要验证多张图片一共的大小。

我们知道uploader组件有max-size和oversize事件，在文件超过限制的时候触发。但图片大小之和怎么计算呢？

after-read

在查看vant官方文档的时候发现当图片读取完成后的回调函数时after-read。

我们把函数传递的参数打印一下，发现里面的content部分是base64格式的图片，一张2.4M大小的图片base64格式看起来就如下图。

函数处理

//获取base64图片大小，返回kb数字
function baseSize(file) {
  var content  = file.content;
  //把头部去掉
  var str = content.replace('data:image/png;base64,', '');
  // 找到等号，把等号也去掉
  var equalIndex = str.indexOf('=');
  if(str.indexOf('=')>0) {
      str=str.substring(0, equalIndex);
  }
  // 原来的字符流大小，单位为字节
  var strLength=str.length;
  // 计算后得到的文件流大小，单位为字节
  var fileLength=parseInt(strLength-(strLength/8)*2);
  // 由字节转换为kb
  var size = "";
  size = (fileLength / 1024).toFixed(2);
  var sizeStr = size + ""; //转成字符串
  var index = sizeStr.indexOf("."); //获取小数点处的索引
  var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
  if (dou == "00") { //判断后两位是否为00，如果是则删除00                
    return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
  }
  return size;
}