web-dev-qa-db-fra.com

Comment convertir des fichiers en Base64 dans React

J'ai un enregistrement pour dans React où je dois télécharger des fichiers sur le serveur. Ces fichiers doivent être encodés en Base64.

La fonction pour l'encoder est la suivante:

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

Et la fonction pour gérer le clic sur le bouton suivant du formulaire est la suivante:

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

Si je console le journal par exemple le premier this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file; j'obtiens

enter image description here

Tout semble correct, mais je reçois une erreur:

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

Aucune idée sur la façon de résoudre ça?

[~ # ~] mise à jour [~ # ~] 

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

Je l'ai changé. Et dans ce cas n'existe que idCard. Maintenant, je ne reçois aucune erreur mais idCardBase64 Est "" Et n'est pas encodé en Base64.

javascriptreactjsbase64filereader
3
Boky

la lecture des fichiers est asynchrone. utilisez donc le rappel ou promettez de résoudre votre problème.

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

et utilisez le rappel pour renvoyer les données que vous obtenez.

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

En outre, vous pouvez utiliser ce composant React React File Base64

Vérifiez la démo

0
Mostafa Nawara