JavaScript FileReader中的readAsDataURL（）和readAsArrayBuffer（）和readAsText（）之間的區別

Question

我找到了一個圖像上傳預覽代碼，我很困惑FileRead()中發生了什麼？

var openFile = function(event) { 
    var input = event.target; 

    var reader = new FileReader(); 
    reader.onload = function() { 
     var dataURL = reader.result; 
     var output = document.getElementById('output'); 
     console.log(dataURL) 
     output.src = dataURL; 
    }; 
    reader.readAsDataURL(input.files[0]); 
}; 

Answer 1

• .readAsDataURL()返回表示文件的數據作爲 base64編碼字符串

• .readAsArrayBuffer()返回ArrayBuffer表示文件的 數據

• .readAsText()回報作爲該文件的數據的URL文本字符串。

欲瞭解更多信息查詢thisFileReader doc。

Answer 2

readAsDataURL()將返回一個字符串，該字符串可以粘貼到HTML標記的url屬性中（例如：在img中的src=）。對於img標籤，這將有效地顯示圖像，就像src是讀取文件的地址一樣。它是原始文件內容的轉換（更大）。

readAsText()將返回一串可以被JavaScript函數解析或在textarea中顯示並可能被用戶理解的字符。這通常用於閱讀文本文件。