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

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

（注意：我知道firestore内置了此功能，但是现在重写代码以在平台上实现项目的其余部分为时已晚。）

我通过输入接收文件：

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

以当前文件作为输入调用encodeImageAsUrl（）函数：

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

  } 

---

变量“imageAsUrl”打印为“undefined”，还请注意，我尝试的任何图像都是1.2MB或更低。

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

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

  }

---

我理解您正在执行的操作的逻辑，但提供的代码仍以未定义的形式打印…尝试调试您是否正在

e.target.result

中获取数据我已使用log语句更新了代码e.target.result实际上包含base64编码的数据。我可以将数据粘贴到在线图像转换器中，它会显示正确的图像。我应该将状态设置为e.target.result还是imageAsUrl？在设置状态之前，如果您正在

imageAsUrl

中获取数据，请尝试测试

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

  }