使用异步和等待文件读取器时出错答案

【问题标题】：Error using async and await with filereader使用异步和等待文件读取器时出错
【发布时间】：2018-06-18 18:26:11
【问题描述】：

我正在尝试使用 FileReader 读取文件：

async readFile(event: any) {
    var file = event.target.files[0];
    var data:string
    if (file) {   
        var reader:FileReader = new FileReader();
         reader.onload = async function (evt : FileReaderEvent) {
            data = await evt.target.result;
            console.log(evt.target.result);

        };
        console.log(file);
        console.log(data);
        await reader.readAsText(file);
        await this.processFileContent(data);
    }
 }

但是，evt.target.result 在我的 console.log(file) 调用之后仍然会被打印出来。

有谁知道我如何获取文件的结果并将其传递给我的 processFileContent 函数？

【问题讨论】：

processFileContent 是否期望 File 对象（这是您现在给它的对象）或 string ？
@Touffy 它需要一个字符串
那是你的第一个问题。您正在读取文件，但您并没有将结果保存在任何地方，更不用说将其传递给this.processFileContent。
我猜它是先打印的，因为它在等待之前。并且稍后将在事件循环中调用异步内部函数...
@Touffy 我更新了代码以便存储结果，但仍有问题

标签： javascript typescript asynchronous

【解决方案1】：

在 blob 本身上使用新的读取方法

/** @type {Event} evt */
async readFile (evt) {
  const file = evt.target.files[0]
  if (file) {
    const data = await file.text()
    return this.processFileContent(data)
  }
}

【讨论】：

【解决方案2】：

需要利用 reader 将 blob 转换为 base64，更喜欢使用 async-await 语法，所以我选择将 reader 逻辑提取到 helper 中，如下所示：

//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

并在主代码中使用await 调用它：

//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)

【讨论】：

@MartinsOnuoha 虽然没有错误处理。如果您确实实施了它，请随时更新答案。