Javascriptのbase64エンコード関数が未定義を返します

Question

Base64エンコードされた画像を文字列配列に追加しようとしています。

<FormControl 
    type="file" 
    values={this.state.files} 
    multiple 
    onChange={this.addImage.bind(this)} 
/> 

私は、この関数の呼び出しています：

addImage(event) { 
    var newArr = []; 
    for(var i=0; i<event.target.files.length; i++) { 
    newArr.push(this.getBase64(event.target.files[i]))); 
    } 
    this.setState({ files: newArr }); 
} 

画像を符号化する機能は次のようになります。

getBase64(file) { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
    return reader.result 
    } 
    reader.readAsDataURL(file); 
} 

反応し、ブートストラップのFormControlで作成したファイルの入力フォームを使用してaddImage（）関数はgetBase64（）関数を呼び出します。戻り値はで、未定義の値はです。これは、getBase64（）関数の実行時から発生したと考えられます。 reader.resultを吐き出すためにconsole.log行を追加すると、base64文字列がコンソールに正しく出力されますが、戻り値は同じですが、明らかに同じです。

ここで何が起こっているのですか。実際のbase64文字列が正しく返される方法を教えてください。

Answer 1

getBase64からの値は、非同期的に結果を提供するイベントハンドラ内から同期的に返されません。 FileReaderloadendイベントは結果を非同期的に返します。 getBase64()関数呼び出し

class ReadFiles { 
 
    constructor() {} 
 
    async addImage(event) { 
 
    const newArr = []; 
 
    for (let i = 0; i < event.target.files.length; i++) { 
 
     newArr.push(
 
     await this.getBase64(event.target.files[i]) 
 
    ); 
 
    } 
 
    const o = { 
 
     files: newArr 
 
    }; 
 

 
    console.log(o); 
 
    } 
 

 
    getBase64(file) { 
 
    return new Promise(function(resolve) { 
 
     var reader = new FileReader(); 
 
     reader.onloadend = function() { 
 
     resolve(reader.result) 
 
     } 
 
     reader.readAsDataURL(file); 
 
    }) 
 
    } 
 

 
} 
 

 
let reader = new ReadFiles(); 
 

 
document.querySelector("input[type=file]") 
 
.onchange = e => reader.addImage.call(reader, e);

<input type="file" multiple>