FileReader 的使用

一： 官方介紹：

    FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

    其中File對象能夠是來自用戶在一個<input>元素上選擇文件後返回的FileList對象,也能夠來自拖放操做生成的 DataTransfer對象,還能夠是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果。ps: 來自Web技術文檔的闡述

二：FileReader的使用和一些經常使用的方法和事件：

1）使用方法：

FileReader（） 是一個構造函數。 使用的時候，先經過構造函數初始化一個FileReader對象,如：

/* 初始化一個FileReader 對象 */
const reader= new  FileReader()
/* 開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。 */
reader.readAsDataURL(file)
/* 在讀取後，觸發的事件，並獲取讀取文件的地址 */
reader.onload = (e) => {
      let base64Str = reader.result.split(',')[1]
       img.src = e.target.result
}
複製代碼

2) 方法：

(1) FileReader.abort() 做用：停止讀取操做。

(2) FileReader.readAsArrayBuffer() 做用： 開始讀取指定的Blob中的內容，一旦完成，result屬性中保存的將是被讀取文件的ArrayBuffer數據對象。

(3) FileReader.readAsBinaryString() 做用： 開始讀取指定的Blob中的內容，一旦完成，result屬性中將包含所讀取文件的原始二進制數據。

(4) FileReader.readAsDataURL() 做用：開始讀取指定的Blob中的內容，一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。此方法較爲經常使用。

(5) FileReader.readAsText() 做用： 開始讀取指定的Blob中的內容，一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內容。

3）事件

(1) FileReader.onabort 做用： 該事件在讀取操做被中斷時觸發。

(2) FileReader.onerror 做用： 該事件在讀取操做發生錯誤時觸發。

(3) FileReader.onload 做用： 該事件在讀取操做完成時觸發。該事件較爲經常使用。

(4) FileReader.onloadstart 做用： 該事件在讀取操做開始時觸發。

(5) FileReader.onloadend 做用： 該事件在讀取操做結束時（要麼成功，要麼失敗）觸發。

(6) FileReader.onprogress 做用：該事件在讀取Blob時觸發。

項目中有些上傳文件和圖片都用到了FileReader，因此作了一個簡單的總結。但願對你有幫助，不要忘了點個贊喲。 ღ( ´･ᴗ･` )比心