javascript - 如何将 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

jsFiddle: jsFiddle demo of the above working code

我希望能够将 base64 分配给一个变量，所以我根据 this answer 尝试了以下操作:

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

它当前没有向控制台输出任何内容。

问题:

如何将 base64 值保存为变量？

编辑:

根据要求，对于上下文:

我正在 Google Apps 脚本环境中提交表单。

我之前已完成此操作并将一个表单对象(其中包含一个文件)传递给 Google Apps 脚本函数。

但是，这种方法的限制之一是，如果将表单对象作为参数传递，则它是唯一允许的参数。

A form element within the page is also legal as a parameter, but it must be the function’s only parameter

Source

在这个例子中，我传递了多个参数，其中一个参数将是一个转换为 base64 的 pdf 文件。

为了回应@Aasmund 的出色回答，我希望变量赋值能够阻止进一步的代码执行:

var my_pdf_file = [ converted file here ];

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

否则，我将不得不重构剩余的代码以在 then block 中进行(由@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 - 每当它变为是的，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 之前，这两种方法都不允许您阻止进一步的代码执行。这是设计使然；但是，如果您因为没有时间重构旧代码而真的需要阻止下载，请参阅 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。我还尝试添加一个忙等待循环，但这导致我的浏览器挂起。)

(另请注意，来自 Charles Owen 的评论中，readAsDataURL 实际上返回一个 data: URL，因此如果您只想获取 Base64 数据，则需要去除前缀作为根据链接文档。)