web-dev-qa-db-ja.com

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

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

たとえば最初のログをコンソール化すると、this.state.files.filter(file => file.file_type === "ID_CARD")[0].values.file;が得られます

enter image description here

すべて問題ないようですが、エラーが発生します。

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

これを解決する方法はありますか？

[〜＃〜]更新[〜＃〜]

_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でエンコードされていません。

javascriptreactjsbase64filereader
3
Boky

ファイルの読み取りは非同期です。コールバックまたはプロミスを使用して問題を解決してください。

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);
    };
}
4
Ajay Suvarna

また、これを使用することもできますReact component React File Base64

demo を確認します

0
Mostafa Nawara