javascript - Ladda upp en fil och läs data med FileReader i Angular 2

Jag försöker skapa ett uppladdningsformulär i Angular 2 ts (2.2.1), som tillåter uppladdning av t.ex. en CSV-fil, men istället för att filen skickas direkt till en http-tjänst vill jag att filen först ska valideras i webbläsaren.

Hittills kan jag redan ladda upp en fil och skriva ut den i konsolen med denna kod:

  1. Html-inmatning för filuppladdning

    <input type="file" (change)="changeListener($event)" #input />

  2. I min Angular-komponent har jag ställt in eventlyssnaren och filläsaren.

    export class UploadComponent {

    public fileString;

    constructor() {
        this.fileString;
    }

    changeListener($event): void {
            this.readThis($event.target);
        }

    readThis(inputValue: any): void {
        var file: File = inputValue.files[0];
        var myReader: FileReader = new FileReader();
        var fileType = inputValue.parentElement.id;
        myReader.onloadend = function (e) {
            //myReader.result is a String of the uploaded file
            console.log(myReader.result);

            //fileString = myReader.result would not work, 
            //because it is not in the scope of the callback
        }

        myReader.readAsText(file);
    }
}

Den här koden fungerar helt utan problem hittills.

Men jag har inte hittat ett sätt att lagra data från läsaren på ett sätt som tillåter mig att komma åt det med min Angular-komponent.

Callback-funktionen myReader.onloadend() har inte tillgång till komponentens variabler. Finns det något sätt att injicera dessa variabler?

Hur kan jag få den lästa datan till variabeln fileString i min komponent?

Svar #1

Gör det så här:

myReader.onloadend = (e) => {
   console.log(myReader.result);
   this.fileString = myReader.result as string;
};

Så att du kan komma åt dina variabler.

För en mer detaljerad förklaring: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Relaterade artiklar