在Javascript中同步读取文件

Question

我想读取一个文件，并使用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'变量的值？

Answer 1

下面的代码以同步的方式读取文件

 function SyncFileReader(file) {
    let self = this;
    let ready = false;
    let result = '';

    const sleep = function (ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    self.readAsArrayBuffer = async function() {
        while (ready === false) {
          await sleep(100);
        }
        return result;
    }    

    const reader = new FileReader();
    reader.onloadend = function(evt) {
        result = evt.target.result;
        ready = true;
    };
    reader.readAsArrayBuffer(file);
  }

用法：

const fileReader = new SyncFileReader(file);
const arrayBuffer = await fileReader.readAsArrayBuffer();

Answer 2

同步任务（阻塞）通常是不好的。如果没有真正的理由同步执行此操作，我强烈建议您使用事件回调。

假设您的文件被破坏，HTML5API无法读取，它不会给出结果。它会破坏你的代码并封锁网站。或者，有人可以选择一个10GB的文件，这将冻结您的HTML页面，直到文件完全加载。使用该异步事件处理程序，您可以捕获可能的错误。

为了克服回调的限制，我使用了一个简单的技巧：

var ready = false;
var result = '';

var check = function() {
    if (ready === true) {
         // do what you want with the result variable
         return;
    }
    setTimeout(check, 1000);
}

check();

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

检查功能，每秒检查就绪标志变量是否设置为true。如果是，您可以确定结果是可用的。

这可能不是最好的做法，这样做，但我做了一个webapp使用这种技术约30次与10多个setTimeout在同一时间运行，并经历了没有问题，直到现在。

Answer 3

您可以使用标准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...
}

... 或者使用promise回调使用它（不需要异步上下文）：

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