콘솔의 오류 : 매개 변수의 형식이 Blob이 아닙니다.

Question

<script> 
     var file = document.getElementById("userFile").files[0]; 
     var reader = new FileReader(); 
     reader.readAsArrayBuffer(file); 
     var byteArray = reader.result; 
     console.log(byteArray); 
</script> 

이 코드는 콘솔에서이 오류를 생성합니다. 'FileReader'에서 'readAsArrayBuffer'를 실행하지 못했습니다. 매개 변수 1의 형식이 'Blob'이 아닙니다.

FileReader는 File 인터페이스가 Blob을 기반으로하기 때문에 Blob 및 File을 매개 변수로 사용할 수 있습니다.

Answer 1

FileReaderreadAsArrayBuffer (및 기타 FileReader 메서드)이 완료되면 콜백을 트리거하기 위해 .onload property을 사용해야합니다. DOM을 기다리고

const input = document.getElementById('userFile'); 
 
const reader = new FileReader(); 
 

 
input.onchange = function() { 
 
    const file = input.files[0]; 
 
    reader.readAsArrayBuffer(file); 
 
}; 
 

 
reader.onload = function() { 
 
    const resultArray = new Int8Array(reader.result); 
 
    document.getElementById('result').innerHTML = resultArray; 
 
};

<input type="file" id="userFile"/> 
 
<h4>File Data:</h4> 
 
<span id="result"/>