从输入标签显示图像，无法检索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); 
     } 


}