在 Javascript 中同步读取文件

我想读取一个文件并使用 FileReader 对象将其转换为 base64 编码的字符串。这是我使用的代码：

    var reader = new FileReader();
    reader.onloadend = function(evt) {  
        // file is loaded
        result_base64 = evt.target.result; 
    };
    reader.readAsDataURL(file); 


  

但在本例中，我在事件处理程序（onLoadEnd 事件）中获得转换结果。我想要一个同步方法。有没有办法“readAsDataURL”方法可以直接返回“result_base64”变量的值？

您可以使用标准文件读取器同步 https://developer.mozilla.org/en-US/docs/Web/API/FileReaderSync，这是 FileReader API 的更简单、同步、阻塞版本，类似于您已经使用的：

let reader = new FileReaderSync();
let result_base64 = reader.readAsDataURL(file); 

console.log(result_base64); // aGV5IHRoZXJl...

请记住，这是仅在工作线程中可用，出于显而易见的原因。

如果您需要一个主线程的解决方案，“读取”同步 API，即顺序读取，您可以将异步 FileReader 包装在 Promise 中并使用异步函数（您可能需要转译）：

async function readFileAsDataURL(file) {
    let result_base64 = await new Promise((resolve) => {
        let fileReader = new FileReader();
        fileReader.onload = (e) => resolve(fileReader.result);
        fileReader.readAsDataURL(file);
    });

    console.log(result_base64); // aGV5IHRoZXJl...

    return result_base64;
}

然后你可以在另一个异步上下文中等待这个函数：

async function main() {
    let file = new File(...)
    let dataURL = await readFileAsDataURL(file)
    console.log(dataURL); // aGV5IHRoZXJl...
}

...或者只是使用承诺回调来使用它（不需要异步上下文）：

readFileAsDataURL(file).then(dataURL => {
    console.log(dataURL); // aGV5IHRoZXJl...
});