React에서 Base64로 파일을 변환하는 방법

Question

React에서 파일을 서버에 업로드해야하는 위치에 등록했습니다. 이러한 파일은 Base64로 인코딩되어야합니다.

기능 다음대로 인코딩 :

handleNextButtonClick(event){ 
    event.preventDefault(); 
    let data = {domainId: this.props.user[0].domainId, name: steps.stepThree, values: this.state.files}; 

    let idCard = this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file; 
    let statuses = this.state.files.filter(file => file.file_type === "STATUTES")[0].values.file; 
    let blankLetterHead = this.state.files.filter(file => file.file_type === "LETTER_HEAD")[0].values.file; 
    let companyPhoto = this.state.files.filter(file => file.file_type === "COMPANY_PICTURE")[0].values.file; 


    let idCardBase64 = this.getBase64(idCard); 
    let statusesBase64 = this.getBase64(statuses); 
    let blankLetterHeadBase64 = this.getBase64(blankLetterHead); 
    let companyPhotoBase64 = this.getBase64(companyPhoto); 
} 

것은 내가 예를 들어 첫 번째 this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file;을위한 로그 콘솔 경우

getBase64(file) { 
     let document = ""; 
     let reader = new FileReader(); 
     reader.readAsDataURL(file); 
     reader.onload = function() { 
      document = reader.result; 
     }; 
     reader.onerror = function (error) { 
      console.log('Error: ', error); 
     }; 

     return document; 
    } 

을 그리고 폼의 다음 버튼을 클릭하여 처리하는 기능은 다음과 같다 나는

모든 것이 좋아 보인다,하지만 난 오류가 받고 있어요 :

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

어떤 생각이 어떻게이 문제를 해결하기를?

UPDATE

let idCardBase64 = idCard ? this.getBase64(idCard) : ""; 
let statusesBase64 = statuses ? this.getBase64(statuses) : ""; 
let blankLetterHeadBase64 = blankLetterHead ? this.getBase64(blankLetterHead) : ""; 
let companyPhotoBase64 = companyPhoto ? this.getBase64(companyPhoto) : ""; 

나는 그것을 변경되었습니다. 이 경우에는 idCard 만 존재합니다. 이제 오류가 발생하지 않지만 idCardBase64은 ""이고 Base64는 인코딩되지 않았습니다.

Answer 1

파일 읽기가 비동기입니다. 콜백을 사용하거나 문제를 해결하기로 약속하십시오.

let idCardBase64 = ''; 
this.getBase64(idCard, (result) => { 
    idCardBase64 = result; 
}); 

귀하가 얻은 데이터를 반환하려면 콜백을 사용하십시오.

getBase64(file, cb) { 
    let reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function() { 
     cb(reader.result) 
    }; 
    reader.onerror = function (error) { 
     console.log('Error: ', error); 
    }; 
}