浏览器中File,FileReader,Blob, FormData, ArrayBuffer等对象对比分析

File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL。

1.File

提供了如下的元信息，通过FileList中的单个文件调用
name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为Date对象实例。

2.FileList

参照http://javascript.ruanyifeng.com/htmlapi/file.html

其中说明的两个FileList
(1)使用input上传文件，直接通过 <input type="file" id="input" onchange="console.log(this.files.length)" multiple />，其中this.files就是FileList
(2)使用拖拽的方式

    function(evt){
        var files = evt.dataTransfer.files; // FileList object.
    }

3.FileReader

FileReader API用于读取文件，即把文件内容读入内存。它的参数是File对象或Blob对象。

(1)readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
(2)readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
(3)readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
(4)readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。

4.Blob

参照http://javascript.ruanyifeng.com/htmlapi/file.html

1.全称Binary Large Object，即二进制大数据对象，提供相应的接口；其他操作二进制的对象都是建立在Blob基础之上，并继承了其属性和方法。

2.Blob只有两个属性，分别为size和type;
size：二进制数据的大小，单位为字节。
type：二进制数据的MIME类型，全部为小写，如果类型未知，则该值为空字符串。

3.相关方法 】
（1）Blob构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。
（2）Blob对象的slice方法，将二进制数据按照字节分块，返回一个新的Blob对象。

5.FormData

6.ArrayBuffer

7.Canvas

8.URL

URL对象用于生成指向File对象或Blob对象的URL。

var objecturl =  window.URL.createObjectURL(blob);//生成 
window.URL.revokeObjectURL(objectURL);//是失效

9.将Base64转化为Form-Data形式

function base64ToFile (baseUrl) {
  let byteString = window.atob(baseUrl.split(',')[1])
  let mimeString = baseUrl.split(',')[0].split(':')[1].split(';')[0]

  // 类型数组
  let ia = new Uint8Array(byteString.length)
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  let formdata = new window.FormData()
  let file = new window.Blob([ia], {
    type: mimeString
  })
  formdata.append('file', file, 'cms.' + mimeString.split('/')[1])
  return formdata
}