Vue.js 구성 요소 메서드 내에서 FileReader API 사용

Question

Vue.js가 포함 된 파일 선택기를 개발 중입니다. 선택한 파일 미리보기를 표시하려고합니다. 나는 이것을 달성하기 위해 FileReaderAPI을 사용합니다. 나는 FileReader 개체의 readAsDataURL 메서드로 데이터 URL로 사용자가 선택한 파일을 읽었습니다.

Uncaught TypeError: reader.onload is not a function 
    at VueComponent.handleFileChanges 

그것은 독자가 될 수는 제가 위에서 언급 한을 FileReader 정의되지 않은 오류 다음, 정의되지 않은 :

그러나 나는 오류 메시지가 reader.onload이 같은 함수가 아닙니다 말을 얻는다. 요점은 내가 무엇을 놓치고있다

handleFileChanges (e) { 
    var reader = new window.FileReader() // if window is not used it says File READER is not defined 
       reader.onload(function (event) { 
        // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL 
        let imageDataURL = event.target.result 
        this.$store.dispatch('attachedFile', imageDataURL) // or previewFile 
       }) 
       reader.readAsDataURL(e.target.files[i]) 
} 

다음과 같이 내가 이것을해야합니까하려고 어떻게

은?

Answer 1

그것은,있어 오류가 말한다, 그리고 그것은 맞습니다 아니라하지 않는 function.Basically onload가 새롭게 구축 FileReader 개체에 연결된 이벤트 처리기/자산이며 그것은 작동하지 이후, 그것은 어떤 콜백을 허용하지 않습니다.

이처럼 사용

는

handleFileChanges (e) { 
    var reader = new window.FileReader() // if window is not used it says File READER is not defined 
       reader.onload = function (event) { 
        // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL 
        let imageDataURL = event.target.result 
        this.$store.dispatch('attachedFile', imageDataURL) // or previewFile 
       } 
       reader.readAsDataURL(e.target.files[i]) 
} 

또한 this.$store.dispatch에서 this이 상황을 해결하기 위해 경계되어 있는지 확인합니다.

Answer 2

onload은 속성이므로 콜백으로 설정 (수정)해야합니다. 그러나 FileReader은 EventTarget에서 상속되지만 모든 이벤트 (onload, onabort 등)는 addEventListener과 함께 사용할 수 있습니다. 따라서 어떤 경우에 당신은 addEventListener을 사용하는 것을 고려할 수있는 on-load를위한 이벤트 핸들러로서 콜백을 전달할 필요가 있습니다.

// method 1 
reader.onload = function (e) { ... 
// method 2 
reader.addEventListener("onload", function (e) { ...