如何捕获FileReader base64作为变量？

Question

这将base64打印到控制台：

function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        console.log(reader.result);
    };
    reader.onerror = function(error) {
        console.log('Error: ', error);
    };
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string

来源:https://stackoverflow.com/A/36281449/1063287

我希望能够将base64赋值给一个变量，所以我尝试了以下操作，基于这个答案：

function getBase64(file, onLoadCallback) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = onLoadCallback;
    reader.onerror = function(error) {
        console.log('Error when converting PDF file to base64: ', error);
    };
}

var my_pdf_file = document.querySelector("#my_pdf_file").files[0];
var my_pdf_file_as_base64 = "";
getBase64(my_pdf_file, function(e) {
    my_pdf_file_as_base64 = e.target.result
});

// print out the base64 to show i have captured the value correctly
console.log(my_pdf_file_as_base64);

它目前没有向控制台打印任何内容。

问题：

我正在提交一个表单在谷歌应用程序脚本环境。

我以前已经这样做了，并将一个表单对象（包括一个文件）传递给Google Apps脚本函数。

但是，这种方法的一个约束条件是，如果将表单对象作为参数传递，则它是唯一允许的参数。

针对@aasmund的伟大回答，我希望变量赋值阻止进一步的代码执行：

var my_pdf_file = [ converted file here ];

// don't do this stuff until the above variable is assigned

否则，我将不得不重构发生在then块中的剩余代码（由@aasmund建议），由于在提交表单之前要进行大量的验证/变量准备/条件处理，这可能会很混乱/不可能。

Answer 1

fileReader.readAsDataurl()是异步的-下载在后台进行，而其余代码则继续执行。因此，console.log(my_pdf_file_as_base64)；打印空字符串的原因是，行my_pdf_file_as_base64=e.target.result尚未执行：对getbase64()的调用几乎立即完成，并执行后续语句；只有稍后（下载完成时）才会执行回调。

处理这种情况的方法是将使用下载文件的代码放置在回调内部：

getBase64(my_pdf_file, function(e) {
    my_pdf_file_as_base64 = e.target.result;
    console.log(my_pdf_file_as_base64);
});

或者，您可以重复地（例如，在settimeout回调或在某些DOM事件处理程序内）检查reader.readystate===fileReader.done-只要该值变为true，则reader.result将包含该文件。

更灵活的方法是使用promise，这是一个封装异步计算的对象：

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

var promise = getBase64(my_pdf_file);
promise.then(function(result) {
    console.log(result);
});

到目前为止，这看起来与第一种解决方案非常相似，但优点是promise是一个对象，您可以将其传递给其他函数，这样您就可以在一个地方开始计算，并在另一个地方决定计算完成后应该发生什么。

您可能已经注意到，这两种方法都不允许您阻止进一步的代码执行，直到将文件内容分配给全局变量my_pdf_file_as_base64。这是故意的；但是，如果您真的真的需要阻止html" target="_blank">下载，因为您没有时间重构旧代码，请参阅https://stackoverflow.com/A/39914235/626853中的讨论。如果用户的浏览器足够现代化,则可以使用Async/Await：

$(document).on("click", ".clicker", async function() {
    var promise = getBase64(my_pdf_file);
    var my_pdf_file_as_base64 = await promise;
}

（请注意，await仅在async函数中工作，因此单击处理程序必须是async。我还尝试添加了一个繁忙的等待循环，但这导致浏览器挂起。）