1.概念：FileReader 物件允許 Web 應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區即buffer）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。

2.屬性：

FileReader.error :

一個DOMException，表示在讀取檔案時發生的錯誤 。

FileReader.result:

返回檔案的內容。只有在讀取操作完成後，此屬性才有效，返回的資料的格式取決於是使用哪種讀取方法來執行讀取操作的。

FileReader.readyState:

表示FileReader狀態的數字。 EMPTY 0 還沒有載入任何資料。 LOADING 1 資料正在被載入。DONE 2 已完成全部的讀取請求。

3.方法：

FileReader 的例項擁有 4 個方法，其中 3 個用以讀取檔案，另一個用來中斷讀取。

FileReader.abort()：中止讀取操作。在返回時，readyState 屬性為 DONE。

FileReader.readAsArrayBuffer()：開始讀取指定的 Blob 中的內容。 一旦完成，result 屬性中儲存的將是被讀取檔案的 ArrayBuffer 資料物件。

FileReader.readAsDataURL()：開始讀取指定的 Blob 中的內容。一旦完成，result 屬性中將包含一個 data: URL 格式的 Base64 字串以表示所讀取檔案的內容。

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

4.事件：

FileReader.onabort：處理 abort 事件。該事件在讀取操作被中斷時觸發。

FileReader.onerror：處理 error 事件。該事件在讀取操作發生錯誤時觸發。

FileReader.onload：處理 load 事件。該事件在讀取操作完成時觸發。

FileReader.onloadstart：處理 loadstart 事件。該事件在讀取操作開始時觸發。

FileReader.onloadend：處理 loadend 事件。該事件在讀取操作結束時（要麼成功，要麼失敗）觸發。

FileReader.onprogress：處理 progress 事件。該事件在讀取Blob時觸發。

因為 FileReader 繼承自 EventTarget，所以所有這些事件也可以通過 addEventListener 方法使用。

使用：

  function icon_up() {
        const file = document.querySelector('#icon').files[0]
        console.log(file)

        const reader = new FileReader()
        reader.readAsDataURL(file)//進行讀取
        reader.addEventListener('load', function () {
            //讀取的事件監聽
            if (file) {
                console.log(reader.result)
                icon_file = reader.result//儲存讀取後的base64格式圖片
                icon_name = file.name
                document.getElementsByClassName('icon_cen')[0].style.backgroundImage = `url('${icon_file}')`
                document.getElementsByClassName('icon_cen')[0].style.backgroundSize = 'cover'
                document.querySelector('#icon').value = ''
            } else {
                alert('頭像上傳失敗，請重新上傳')
            }
        })

    }