如何解决FileReader.readAsDataURL异步导致Base64值无法及时返回的问题

问题根源 #

你的代码问题在于：FileReader.readAsDataURL()是异步操作，onload回调会在文件加载完成后才触发，但你试图直接从getBase64返回结果——这个返回值会在异步操作完成前就被返回，自然是undefined。同时mapFileData里的callback(obj)也会在Base64生成前执行，导致obj.data无效。

解决方案1：使用回调嵌套 #

修改getBase64让它接受一个回调函数，在异步操作完成后传递Base64结果，再在这个回调里完成obj.data的赋值和最终的callback调用：

function mapFileData(file, callback) {
    var obj = {
        name: file.filename,
        size: file.fileSize,
        type: file.fileType
    };

    // 等待Base64转换完成后再处理
    getBase64(file, function(base64Data) {
        obj.data = base64Data;
        console.log(JSON.stringify(obj)); // 此时data已赋值
        callback(obj);
    });
}

function getBase64(file, callback) {
    var fileReader = new FileReader();
    if (file) {
        fileReader.readAsDataURL(file);
    }
    // 文件加载完成后调用回调传递结果
    fileReader.onload = function(event) {
        callback(event.target.result);
    };
}

解决方案2：使用Promise + async/await（更现代的写法） #

用Promise封装异步操作，再通过async/await让代码逻辑更清晰：

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        // 成功时返回Base64结果
        fileReader.onload = () => resolve(fileReader.result);
        // 处理转换失败的情况
        fileReader.onerror = (error) => reject(error);
    });
}

async function mapFileData(file, callback) {
    var obj = {
        name: file.filename,
        size: file.fileSize,
        type: file.fileType
    };

    try {
        // 等待Base64转换完成
        obj.data = await getBase64(file);
        console.log(JSON.stringify(obj));
        callback(obj);
    } catch (error) {
        console.error('Base64转换失败:', error);
        // 可在此处添加错误处理逻辑，比如通知回调出错
    }
}

如果不想用async/await，也可以用Promise的.then()链式调用：

function mapFileData(file, callback) {
    var obj = {
        name: file.filename,
        size: file.fileSize,
        type: file.fileType
    };

    getBase64(file)
        .then(base64Data => {
            obj.data = base64Data;
            console.log(JSON.stringify(obj));
            callback(obj);
        })
        .catch(error => {
            console.error('Base64转换失败:', error);
        });
}

核心逻辑 #

无论用哪种方式，核心都是等待FileReader的异步加载完成后，再执行需要Base64数据的回调操作，不能在异步操作未完成时就调用callback。

内容的提问来源于stack exchange，提问作者peterremec