使用异步并在FileReader中等待时出错

Question

我正在尝试使用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函数？

Answer 1

需要利用 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)

Answer 2

如果您想通过Promise进行操作，则可以使用Response构造函数（fetch api的一部分）

async readFile(event) {
  const file = event.target.files[0]
  if (!file) return
  const data = await new Response(file).text()
  await this.processFileContent(data)
}

更新资料

现在可以只使用blob.text()一个返回以文本内容解析的promise，不是在所有浏览器中都可用，请参阅Browser Compatibility @ MDN