javascript - 将 base64 数据保存到变量中

Question

我在这里看到了几个示例，并根据这些示例准备了我的解决方案。但我仍然得到 Promise
__proto__: promise
[[PromiseStatus]]: "待定
[[PromiseValue]]:未定义我正在尝试将我的 base 64 数据存储到我的 base64 变量中。请让我知道我的代码有什么问题和可行的解决方案。

下面是我的尝试:

import React, { Component } from 'react'
import { DropzoneArea, DropzoneDialog } from 'material-ui-dropzone'
import Button from '@material-ui/core/Button';


async function getBaseData(selectedFile) {
    let base64;
    var fileToLoad = selectedFile[0];
    base64 = await getBase64(fileToLoad);
    return base64; //This returns me PromiseStatus Pending
}

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

export class ImageUploader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            files: [],
            image: null,
        };
    }
    handleImageChange(files) {
        const { imageCallback } = this.props
        imageCallback(getBaseData(files)); // By this callback i am trying to pass my base64 string to other component
    }
    render() {
        return (
            <DropzoneArea
                acceptedFiles={['image/*']}
                filesLimit={1}
                maxFileSize={10000000}
                //showPreviews={false}
                onChange={this.handleImageChange.bind(this)}
            />
        )
    }
}

Answer 1

您的问题在于您如何管理您的Promise。你不需要像 documentation says 一样从 Promise 返回任何东西否则它会立即解决。

在这种情况下，当您这样做时:

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

它将解析为未定义的 Promise.resolve(reader.result)，因为也许它没有完成，也许而且也许你可以获得准确的结果，但这只是运气reader 实际上在 return(竞争条件)

之前解析

基本上，为了让它工作，您需要使用 promise 的 resolver 和 rejecter 以便它可以解决/拒绝。

编辑:我注意到您在设置回调之前也调用了读取器函数，然后您正在读取文件，添加回调，然后不调用回调。

只需将您的代码更改为:

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        //set the callbacks before reading the object
        reader.onload = () => resolve(reader.result); 
        reader.onerror = error => reject(error);

        reader.readAsDataURL(file);
    });
}