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

摘要：文件的类型，如果分辨不出类型，则为空字符串，该属性只读。二进制数据的类型，全部为小写，如果类型未知，则该值为空字符串。对象的方法，将二进制数据按照字节分块，返回一个新的对象。对象用于生成指向对象或对象的。

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

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

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

其中说明的两个FileList
(1)使用input上传文件，直接通过 ，其中this.files就是FileList
(2)使用拖拽的方式

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

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对象。

参照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对象。

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

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

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
}