從輸入標籤顯示圖像，無法檢索src中的數據

Question

這裏我有一個功能，顯示在我的網頁上的圖像。但問題是，當我嘗試檢索「src」的值（顯然，我試圖獲取以base64編碼的數據）我得到一個空字符串，但我可以看到我的網站上的圖像，也是src的值： Screenshot1

這裏是我的函數，console.log（reader.result）的結果是一個空字符串。

HTML：

<input id="avatar" type="file" onchange="previewFile()"> 
<img id="image" width="200px"> 

的Javascript：

function previewFile() { 
     var preview = document.getElementById("image"); 
     var file = document.querySelector('input[type=file]').files[0]; 
     var reader = new FileReader(); 

     reader.addEventListener("load", function() { 
     preview.src = reader.result; 
     }, false); 

     if (file) { 
     var el = reader.readAsDataURL(file); 
     } 
     console.log(reader.result); 
    } 

我怎麼可能獲得數據？

感謝您的幫助。

Answer 1

console.log輸出爲空的原因是因爲您在圖像加載之前調用它。將console.log移至加載函數，您將看到輸出。

function previewFile() { 

     var preview = document.getElementById("image"); 
     var file = document.querySelector('input[type=file]').files[0]; 
     var reader = new FileReader(); 

     reader.addEventListener("load", function() { 
     preview.src = reader.result; 
     console.log(reader.result); 
     }, false); 

     if (file) { 
     var el = reader.readAsDataURL(file); 
     } 


}