Javascript base64編碼函數返回undefined

我正在嘗試將Base64編碼圖像添加到字符串數組。使用與反應的自舉的FormControl創建的文件輸入格式：Javascript base64編碼函數返回undefined

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

當addImage（）函數調用getBase64（）函數返回值爲undefined。我相信這是由getBase64（）函數運行所引起的。當我添加一個console.log行來吐出reader.result時，base64字符串會正確輸出到控制檯，但返回的值仍然顯然是相同的。

這裏發生了什麼，如何才能正確返回實際的base64字符串？

來源

2017-10-15 scubadiver124

你可以看到有沒有'return'在'getBase64'功能異步返回，對不對？ –

@JaromandaX在'loBandy'事件處理程序 – guest271314

@ guest271314內的'getBase64'函數中有'return'語句，你可以看到'getBase64'函數中沒有'return'，對吧？ –

從異步提供結果的事件處理函數中同步返回getBase64函數沒有值。 FileReaderloadend事件異步返回結果。您可以使用Promise.all()或async/await獲得價值從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>

來源

2017-10-15 04:44:07 guest271314

Javascript base64編碼函數返回undefined

回答

相關問題