javascript - Fel vid användning av async och await med filereader

Jag försöker läsa en fil med 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);
    }
 }

Men evt.target.result skrivs fortfarande ut efter mitt console.log(file)-anrop.

Vet någon hur jag kan få resultatet av filen och skicka det till min funktion processFileContent?

Svar #1

Använd de nya läsmetoderna på själva blobben

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

Alternativ:

evt.target.files[0]?.text().then(this.processFileContent)

Svar #2

Behövde utnyttja läsaren för att konvertera blob till base64, föredrar att använda async-await-syntax, så jag valde att extrahera läsarrollen till en hjälpfunktion på detta sätt:

//* 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)
  })
}

och anropa det med await i huvudkoden:

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

Relaterade artiklar