cropper.js生成的base64位编码转为普通File格式

首先来看下cropper/js生成的base64编码

image.png

接下来使用转为file格式的方法之后，效果如下

//base64转为普通文件格式
base64toFile (dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
},

image.png

接下来是转为blob格式的方法，效果如下

// dataUrl 转 blob
base64toBlob (dataurl) {
  /* eslint-disable */
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
  /* eslint-enable */
},

blob格式

顺带提一下，blob格式用URL.createObjectURL(file.raw)即可生成一个本地的src绑定地址用来图片预览。