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

来源：

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 块中进行（@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。这是设计使然；但是，如果您真的因为没有时间重构旧代码而真的需要阻止下载，请参阅 . If your users' browsers are sufficiently modern, you can use 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 实际上是 returns 一个 data: URL，因此如果您只想获取 Base64 数据，您需要根据链接文档去除前缀。）

Answer 2

我遵守此准则

   async function checkFileBase64(el) {
        let inputEl = $(el).find('input[type=file]');
        let promise = getBase64(inputEl[0]);
        return await promise;
    }
    function getBase64(file) {
       return new Promise(function (resolve, reject) {
            let reader = new FileReader();
            reader.onload = function () { resolve(reader.result); };
            reader.onerror = reject;
            reader.readAsDataURL(file.files[0]);
        });
    }

如何将 FileReader base64 捕获为变量？

How to capture FileReader base64 as variable?

javascript

base64

filereader