ReactでBase64にファイルを変換する方法

Question

私はReactでファイルをサーバーにアップロードする必要があります。これらのファイルはBase64でエンコードする必要があります。次のようにそれをエンコードする

機能は次のとおりです。

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

、フォームの横のボタンをクリックして処理するように機能するには、以下の通りである：

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

私は最初の1 this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file;に例えばログコンソール場合私は得る

すべてがOKと思われるが、私はエラーになっています：

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