Blob、ArrayBuffer、File、FileReader和FormData的区别FormData可以看做是一个应

在工作中会经常遇到操作文件的时候，最常见的是通过input标签获取File文件，他和Blob等有什么区别不太清楚，也没具体了解过，所以有必要挨个明确一下这些名词到底是什么

Blob

概念解释

全称是binary large object,二进制大文件对象，非Javascript特有，计算机通用对象，MDN上解释是，一个Blob对象就是一个包含有只读原始数据的类文件对象，通俗讲就是不可修改的二进制文件

通过构造函数创建Blob对象

var aBlob = new Blob( array, options );
// array：一堆数据构成的数组 
//options：设置一些属性，主要是type属性

Blob对象的属性

size:数据的字节大小（只读）
type:数据的MIME类型，例如'image/jpeg'（只读） (MIME:描述消息内容类型的因特网标准)

Blob对象的方法

Blob对象只有slice方法，对文件分割

Blob.slice(start, end ,contentType)
//start:分割起始点
//end: 分割终点
//contentType:新的MIME类型

File

概念解释

File就是文件，继承自Blob，也是二进制对象，也有自己特有的属性和方法，通常用在<input type="file">选择的FileList对象，或者是使用拖拽操作产生的的DataTransfer对象。

构造函数创建File对象

var myFile = new File(array, name,options);
// array：一堆数据构成的数组 
//name:文件名
//options：设置一些属性，type属性、lastModified

File对象属性

name：文件名
size：文件大小
lastModified ：最后修改时间（时间戳）
lastModifiedDate:最后修改时间Data对象
type：MIME类型 File对象方法 继承自Blob的slice方法

Blob.slice([start, end, contentType)
//start:分割起始点
//end: 分割终点
//contentType:新的MIME类型

ArrayBuffer

概念解释

ArrayBuffer是内存上一段二进制数据，我们可以借助工具TypeArray、DataView对它进行读写

Blob与ArrayBuffer的关系

ArrayBuffer是底层二进制数据，可以借助工具进行读写，而Blob是对底层二进制数据的封装，我们拿到的就是一个整体，能够读取他的大小，类型，但是不能看到细节
Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象，此行为就相当于对ArrayBuffer数据做一个封装，之后就是以整体的形式展现了 -Blob作为一个整体文件，适合用于传输；而只有需要关注细节（比如要修改某一段数据时），才需要用到ArrayBuffer

文件互相转换

File文件转换为Blob对象

let aBlob = new Blob([file], {type: file.type})

Blob转换为File

let files = new window.File([this.blob], file.name, {type: file.type})

File/Blob文件转换为base64

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

图片url转换为base64

img2base64(imgUrl) {
      let image = new Image()
      image.src = imgUrl
      return new Promise((resolve) => {
        image.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let dataUrl = canvas.toDataURL('image/png')
          resolve(dataUrl)
        }
      })
    },

base64转Blob

function dataURLtoBlob(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 });
}

base64转File

 function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        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});
    }

FileReader

通过fileReader可以将Blob、File读取为不同的格式

FileReader.readAsDataURL(blob将二进制数据读取并编码为Base64格式
FileReader.readAsText(blob)就是将二进制数据读取并编码为字符串形式

FormData

使用FormData我们可以异步上传一个二进制文件，而这个二进制文件，就是我们上面讲的Blob对象

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

分类

Blob

File

ArrayBuffer

文件互相转换