当将图像编码到基64时，结果总是未定义的

Question

在我的ReactJS项目中，我试图将图像作为Base64 url存储在Firebase实时数据库中，然后在渲染时转换回图像。

(注意：我知道firestore已经内置了这个，但是现在重写代码以在平台上实现项目的其余部分已经太晚了。(

我通过输入接收文件：

<input onChange={this.handleImageUpload} className="form-control" type="file" name="profilePicture" id="profilePicture" placeholder="Upload a profle picture"/>

它运行handleImageUpload((函数：

handleImageUpload = e => {
e.preventDefault();
const imageAsUrl = this.encodeImageFileAsUrl(e.target.files[0]);
this.setState({
profilePicture: imageAsUrl
});
}

它以当前文件为输入调用encodeImageAsUrl((函数：

encodeImageFileAsUrl = image => {
const file = image;
const reader = new FileReader();
const imageAsUrl = reader.readAsDataURL(file);
console.log("Image as url = " + imageAsUrl)
return imageAsUrl;
} 

变量"imageAsUrl"打印为"未定义"，还请注意，我尝试的任何图像都小于或等于1.2MB。

Answer 1

您需要加载一个事件挂钩，在那里您将获得数据

encodeImageFileAsUrl = image => {
return new Promise(resolve=>{
const file = image;    
const reader = new FileReader();
//Like this
reader.onload = (e) => {
//Adding log to check result
console.log(e.target.result);
resolve(e.target.result);
}
const imageAsUrl = reader.readAsDataURL(file);
});
} 
handleImageUpload = async(e) => {
e.preventDefault();
const imageAsUrl = await this.encodeImageFileAsUrl(e.target.files[0]);
this.setState({
profilePicture: imageAsUrl
});
}