Wie konvertiert man Dateien zu Base64 in React

Question

Ich habe Registrierung für in React, wo ich Dateien auf den Server hochladen muss. Diese Dateien müssen Base64-codiert sein.

Die Funktion zu kodieren sie wie folgt:

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

und Funktion Griff auf Formular nächste Schaltfläche klicken ist wie folgt:

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

Wenn ich die Konsole zum Beispiel log die erste this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file; ich bekomme

Alles scheint in Ordnung, aber ich bin immer Fehler:

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

Jede Idee, wie dieses Problem zu lösen?

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) : ""; 

habe ich es. Und in diesem Fall existiert nur idCard. Jetzt bekomme ich keine Fehler aber idCardBase64 ist "" und nicht Base64 codiert.

Answer 1

Datei lesen ist asynchron. So verwenden Sie Rückruf oder Versprechen, um Ihr Problem zu lösen.

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

und verwenden Sie Callback, um die Daten zurückzugeben, die Sie erhalten.

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