입력 태그에서 이미지를 표시합니다. src에서 데이터를 검색 할 수 없습니다.

Question

여기에 내 웹 페이지에 이미지를 표시하는 기능이 있습니다. 하지만 문제는 내가 "src"(분명히 base64로 인코딩 된 데이터를 얻으려고하는 중) 값을 가져 오려고 할 때입니다. 빈 문자열이 있는데도 내 웹 사이트의 이미지와 src의 값을 볼 수 있습니다. Screenshot1

여기 내 기능이며 console.log (reader.result)의 결과는 빈 문자열입니다.

는 HTML :

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

자바 스크립트 :

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


}