瀏覽器中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
}