如何将FileReader base64分配给变量？

Question

我试图打印base46数据，它来自：

var fileData;
var files = document.getElementById('pickUpFileAttachment').files;
if (files.length > 0) {

    var promise = getBase64(files[0]);
    promise.then(function (result) {

        fileData = result;
        console.log(result);
    });

}

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

在console.log(result)中存在数据，但是当我将其分配给fileData并尝试在getBase64()函数结束后对其进行控制台时，我得到了undefined。如何将base64数据分配给变量？

console.log("displaying the 64base data");
console.log(fileData);

它向我显示了undefined的价值fileData。

Answer 1

在getBase64()函数的结尾fileData还没有被分配 ，因为那时.then的promise回调尚未被调用。

唯一设置和定义的地方是在promise的.then的回调中。正如您所说，您的确在console.log(result)中获取数据。

您应该熟悉异步JS，这是一些文章：

https://medium.com/codebuddies/getting-to-know-asynchronous-javascript-callbacks-promises-and-async-await-17e0673281ee

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Answer 2

Promise是异步的，看来您想同步检索fileData。在这种情况下，当您的fileData执行但您的诺言没有解决时，它就异步了。在这种情况下，您可以使用await。

var fileData = await getBase64(files[0]).catch(err=>{console.log(err});