入力タグから画像を表示しています。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が空白を出力しているからです。 console.logをload関数に移動すると、出力が表示されます。

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); 
     } 


}