Blob、ArrayBuffer、File、FileReader和FormData的区别

原文地址：https://cloud.tencent.com/developer/article/1525156

概述：

• Blob、ArrayBuffer、File可以归为一类，它们都是数据；
• FileReader算是一种工具，用来读取数据；
• FormData可以看做是一个应用数据的场景。

Blob

概念理解：

• Blob的全称是binary large object，表示二进制大对象，并不是前端的特有对象，而是计算机界的通用术语，MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。
• MDN中官方的解释是：一个Blob对象就是一个包含有只读原始数据的类文件对象。通俗点，我们可以直接将Blob看做是一个不可修改的二进制文件。
• 简单来说，Blob就是一个只读的二进制文件，我们可以知道它的文件大小（size），文件类型（type），并可以对其作出分割（slice）。

使用：

　　直接通过new Blob()就可以创建一个Blob对象。

var aBlob = new Blob( array, options );
array(可选)：是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体。（暂时可以不用理解，就可以看作是一堆数据） 
options（可选）：一个对象，用来设置Blob的一些属性。主要的是一个type属性，表示Blob的类型（其他暂时也不用管）。

属性：

• Blob.size(只读)：Blob对象中包含的数据大小（字节）
• Blob.type(只读)：表明该Blob对象所包含数据的MIME类型。例如若为图片，此字段就类似为’image/jpeg‘。如果类型未知，则该值为空字符串。

 方法：

　　Blob只有一个slice方法，实现对文件的分割（注意这里并不违背Blob的只读性，slice只是只是复制指定范围内的Blob数据）。

Blob.slice(start, end ,contentType)
start:开始索引，可以为负数，语法类似于数组的slice方法。默认值为0。 
end:结束索引，可以为负数，语法类似于数组的slice方法。默认值为最后一个索引。 
contentType：新的Blob对象的MIME类型，这个值将会成为新的Blob对象的type属性的值，默认为一个空字符串。

应用：

• Base64=>File
  

  //将base64转换为blob
  dataURLtoBlob: function (dataurl) {
    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 Blob([u8arr], {type: mime});
  },
  //将blob转换为file
  blobToFile: function (theBlob, fileName) {
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
  }

• Blob下载到本地。原理就是利用Blob对象把需要下载的内容转换为二进制，然后借助<a>标签的href属性和download属性，实现下载。
  

  function saveShareContent (content, fileName) {
      let downLink = document.createElement('a')
      downLink.download = fileName
      //字符内容转换为blod地址
      let blob = new Blob([content])
      downLink.href = URL.createObjectURL(blob)
      // 链接插入到页面
      document.body.appendChild(downLink)
      downLink.click()
      // 移除下载链接
      document.body.removeChild(downLink)
  }　

ArrayBuffer

概念理解：

• ArrayBuffer就是一个二进制数据通用的固定长度容器。通俗点说，就是内存上一段连续的二进制数据。
• 我们可以对ArrayBuffer进行读写，但需要借助它提供的工具TypeArray或DataView。

Blob与ArrayBuffer的关系

• 相同点： Blob和ArrayBuffer都是二进制的容器；
• ArrayBuffer：ArrayBuffer更底层，就是一段纯粹的内存上的二进制数据，我们可以对其任何一个字节进行单独的修改，也可以根据我们的需要以我们指定的形式读取指定范围的数据
• Blob：Blob就是将一段二进制数据做了一个封装，我们拿到的就是一个整体，可以看到它的整体属性大小、类型；可以对其分割，但不能了解到它的细节
• 联系：Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象，此行为就相当于对ArrayBuffer数据做一个封装，之后就是以整体的形式展现了
• 应用上的区别：由于ArrayBuffer和Blob的特性，Blob作为一个整体文件，适合用于传输；而只有需要关注细节（比如要修改某一段数据时），才需要用到ArrayBuffer

Buffer

概念理解：

　　但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。

　　在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法，可以让 Node.js 处理二进制数据，每当需要在 Node.js 中处理I/O操作中移动的数据时，就有可能使用 Buffer 库。原始数据存储在 Buffer 类的实例中。一个 Buffer 类似于一个整数数组，但它对应于 V8 堆内存之外的一块原始内存。

在v6.0之前创建Buffer对象直接使用new Buffer()构造函数来创建对象实例，但是Buffer对内存的权限操作相比很大，可以直接捕获一些敏感信息，所以在v6.0以后，官方文档里面建议使用 Buffer.from() 接口去创建Buffer对象。

Buffer与字符编码：

const buf = Buffer.from('runoob', 'ascii');
// 参数1: 需要编码的字符串  参数2：编码格式：ascii uft8 utf16le base64 letin1 binary hex

// 输出 72756e6f6f62
console.log(buf.toString('hex'));

// 输出 cnVub29i
console.log(buf.toString('base64'));

Blob=>Buffer

let reader = new FileReader();
reader.onload = function () {
  let buffer = Buffer.from(reader.result);
};
reader.readAsArrayBuffer(blob);

File

概念理解：

• file根据名字很容易理解，就是纯粹的文件。通常，表示我们使用<input type="file">选择的FileList对象，或者是使用拖拽操作搞出的DataTransfer对象。
• file对象也是二进制对象，从属于Blob；也就是说file是Blob里的一个小类，Blob的属性和方法都可以用于file，而file自己也有自己特有的属性和方法。对于Blob和file都有的属性，推荐使用Blob的属性。
• File就是Blob里面的一个小类，继承Blob的方法和属性，拥有自己特有的属性。通常表示<input type="file">里的fileList对象。

应用：

Blob=>File

//将blob转换为file
blobToFile: function (theBlob, fileName) {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
}

FileReader

概念理解：

• 前面提到Blob对象时一个只读对象，但它是一个二进制对象，如果直接读取就只能拿到一堆01数据，因此需要借助专门的工具来读取，这个工具就是fileReader。
• 通过fileReader可以将Blob读取为不同的格式。

应用

利用FileReader结合Node.js保存Blob为本地文件

saveMedia = (blob) => {
  let reader = new FileReader();
  let filename = this.mediaOutputPath + "/" + this.getnowstr() + "_vedio.webm";
  reader.onload = function () {
    let buffer = Buffer.from(reader.result);
    const fs = require('fs')
    fs.writeFile(filename, buffer, {}, (err, res) => {
      if (err) {
        console.error(err);
        return
      }
    })
  };
  reader.readAsArrayBuffer(blob);
};

FormData

概念理解：

　　是XMLHttpRequest Level 2添加的一个新的接口，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。FormData的最大优点就是，比起普通的ajax, 使用FormData我们可以异步上传一个二进制文件，而这个二进制文件，就是我们上面讲的Blob对象。