Blob、Base64、File的关系

前言

  我们在平时的开发中，遇到文件流的处理的时候，就会遇到这三个兄弟。那么为啥会用这三个兄弟，是因为有些JS的API不支持Blob对象，或者说不支持File对象，需要开发者自己来转一层。

正文

一、格式的基本介绍

Blob

  Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。Bolb文档.

Base64

  Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。Base64文档.

File

File接口提供有关文件的信息，并允许网页中的JavaScript访问其内容。File文档.

二、如何判断这三种格式

0. 判断是否为Base64字符串

   // 判断是否为base64格式字符串
   function isBase64(str) {
       //正则表达式判断
       var reg = /^\s*data:([a-z]+/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=-._~:@/?%\s]*?)\s*$/i;
       return reg.test(str)
   }
   

1. 判断是否为Blob对象

   console.log(data instanceof Blob) 
   

2. 判断是否为File对象

   console.log(data instanceof File && !data instanceof Blob)
   

   PS：Blob和File都用Filed对象也是Blob对象，因为File继承于Blob。

三、格式之间的转换

0. Blob转base64

   blobToBase64(blob) {
      return new Promise((resolve, reject) => {
         const fileReader = new FileReader();
         fileReader.onload = (e) => {
             resolve(e.target.result);
         };
         fileReader.readAsDataURL(blob);
         fileReader.onerror = () => {
             reject(new Error('文件流异常'));
         };
      })
   },
   

1. Base64转Blob

   function base64ToBlob(urlData, type) {
       let arr = urlData.split(',');
       let mime = arr[0].match(/:(.*?);/)[1] || type;
       // 去掉url的头，并转化为byte
       let bytes = window.atob(arr[1]);
       // 处理异常,将ascii码小于0的转换为大于0
       let ab = new ArrayBuffer(bytes.length);
       // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
       let ia = new Uint8Array(ab);
       for (let i = 0; i < bytes.length; i++) {
         ia[i] = bytes.charCodeAt(i);
       }
       return new Blob([ab], {
          type: mime
       });
   },
   

2. base64转换为File

   function dataURLtoFile(dataurl, filename) {
       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);
       }
       return new File([u8arr], filename, { type: mime });
   }
   

3. Blob转File

   function blobToFile(blob) {
       return new File([blob], 'screenshot.png', { type: 'image/jpeg'      })
   }
   

总结：以上就是本人总结的，Blob、Base64、File之间的关系。