Javascript 将base64数据保存到变量中

我在这里看到了几个例子，并根据这些例子准备了我的解决方案。但我还是得到了

承诺
__承诺
[[PromiseStatus]]：“待定
[[PromiseValue]]：未定义
我正在尝试将我的base64数据存储到我的base64变量中。请让我知道我的代码和工作解决方案有什么问题

以下是我的尝试：


import React，{Component}来自“React”
从“材料ui dropzone”导入{DropzoneArea，DropzoneDialog}
从“@material ui/core/Button”导入按钮；
异步函数getBaseData（selectedFile）{
让base64；
var fileToLoad=selectedFile[0]；
base64=等待getBase64（fileToLoad）；
return base64；//这将返回我的PromiseStatus Pending
}
函数getBase64（文件）{
返回新承诺（（解决、拒绝）=>{
const reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=（）=>resolve（reader.result）；
reader.onerror=错误=>拒绝（错误）；
返回Promise.resolve（reader.result）
});
}
导出类ImageUploader扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件：[]，
图像：空，
};
}
handleImageChange（文件）{
const{imageCallback}=this.props
imageCallback（getBaseData（files））；//通过这个回调，我试图将base64字符串传递给其他组件
}
render（）{
返回(
)
}
}
你的问题是如何管理你的
承诺。你不需要按照承诺返回任何东西，否则它会在中间解决

在这种情况下，当您执行以下操作时：

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
        return Promise.resolve(reader.result) // <--- this is wrong.
    });
}

问题是getBaseData是一个异步函数，但您仍然需要等待它的解决

试着像这样“等待”它：

handleImageChange(files) {
            const { imageCallback } = this.props;
            async function wrap(){
               const result = await getBaseData(files); //result should be a value here and not promise
               imageCallback(result);
            }
            wrap(); // call the async function which will await the getBaseData and use your callback

        }

这里有两个问题：创建
Promise
是不正确的，并且您没有按照您应该的方式处理已解决的
Promise
。不需要像其他答案所建议的那样进行任何
async
或
wait

承诺
创建：

function getBaseData(selectedFiles) {
    var fileToLoad = selectedFiles[0];
    return getBase64(fileToLoad);
}

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result); 
        reader.onerror = error => reject(error);
        reader.readAsDataURL(file);
    });
}

解析
承诺
：

handleImageChange(files) {
    const { imageCallback } = this.props
    getBaseData(files).then(imageCallback);
}

非常感谢@Prince Hernandez在尝试了这个之后，我得到了
Promise[PromiseStatus]]：“已解决”[[PromiseStatus]]：“
我在调试模式下没有尝试过将断点放在
resolve（reader.result）
我得到了
Promise[PromiseStatus]:“已解决”[[PromiseStatus]]：“数据：图像/png；base64，iVBO…
但没有调试模式PromiseValue为空。有什么建议吗？对不起，您的代码还有另一个问题，让我编辑问题并添加正确的步骤。谢谢@Vladimir Bogomolov的帮助，我已经尝试过这种方法，我已经按照@PrinceHernandez的建议更改了我的
函数getBase64（文件）
，并完全按照
handleImageChange（文件）更改了我的处理程序{const{imageCallback}=this.props；异步函数wrap（）{const result=wait getBaseData（文件）；imageCallback（result）；}wrap（）；}
但是我在回调函数中得到的结果是空字符串。请告诉我我犯了什么错误保持你的函数getBase64不变。我用你的代码和我的修改对它进行了测试，它正在工作。没有必要等待
承诺
的解决；只要用
链接它即可（imageCallback）
handleImageChange(files) {
    const { imageCallback } = this.props
    getBaseData(files).then(imageCallback);
}