使用 FileReader.readAsDataURL() 返回 File 对象的 base64答案

【问题标题】：Return base64 of a File object using FileReader.readAsDataURL()使用 FileReader.readAsDataURL() 返回 File 对象的 base64
【发布时间】：2022-11-11 21:32:32
【问题描述】：

我有一个 JS File 对象，我需要将其转换为 base64 值并在 JSON 对象中返回该值。我正在使用 FileReader.readAsDataURL() 但由于它是异步的，因此我似乎没有“按时”获得 base64 值。我正在调用需要 obj 的回调函数。数据值，但未定义。

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

    console.log(JSON.stringify(obj)); // file object with undefined 'data' value 
    callback(obj);
}

function getBase64(file) {
    var fileReader = new FileReader();
    if (file) {
        fileReader.readAsDataURL(file);
    }
    fileReader.onload = function(event) {
        return event.target.result;
    };
}

当我调用callback(obj) 时，我真的不知道如何使obj.data 值可用。有什么帮助吗？

【问题讨论】：

标签： javascript asynchronous filereader

【解决方案1】：

需要将回调语法转为async/await语法，这样就可以将await文件转换为base64。

例如。

async function mapFileData(file, callback) {
    var obj = {};
     const base64 = await getBase64(file);
        obj.name = file.filename;
        obj.size = file.fileSize;
        obj.type = file.fileType;
        obj.data = base64
    });

    console.log(JSON.stringify(obj)); 
    callback(obj);
}

function getBase64(file) {
    var fileReader = new FileReader();
    if (file) {
        fileReader.readAsDataURL(file);
    }
    return new Promise((resolve, reject) => {
      fileReader.onload = function(event) {
        resolve(event.target.result);
      };
    })
}

【讨论】：