Wie funktioniert FileReader mit Angular2?

Question

Wie funktioniert FileReader mit Angular2 !!

Wenn eine Datei von Client-Seite mit Angular2 Lesen und Typoskript,

Ich versuche Filereader auf diese Weise zu verwenden:

var fileReader = new FileReader(); 
fileReader.onload = function(e) { 
    console.log("run fileReader.onload"); 
    // ...... 
} 

Aber es ist überhaupt nicht funktioniert, so ‚Filereader .onload 'Funktion wird nie aufgerufen.

Wirklich brauchen eine Lösung zum Lesen von Dateien, bitte helfen. Dank

Aktivieren Sie diese von einem Online-IDE:

Vorschau: https://angular2-butaixianran.c9.io/src/index.html

Herausgeber: https://ide.c9.io/butaixianran/angular2

Answer 1

Zuerst haben Sie das Ziel des Änderungsereignis auf Eingabeformular in Vorlage zu spezifizieren:

@View({ 
    template:` 
    <div> 
     Select file: 
     <input type="file" (change)="changeListener($event)"> 
    </div> 
    ` 
}) 

Wie Sie I sehen können verband eine changeListener() Methode zu (change) Ereignis. Meine Implementierung der Klasse:

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

    readThis(inputValue: any) : void { 
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader(); 

    myReader.onloadend = function(e){ 
     // you can perform an action with readed data here 
     console.log(myReader.result); 
    } 

    myReader.readAsText(file); 
    } 

Listener ist vorbei Datei von Ereignis zu readThis Methode. Lesen Sie diese haben es eigene FileReader implementiert. Sie können FileReader auch in der Komponente statt in der Funktion definieren.

Answer 2

Antwort von @ haz111 bereits funktioniert, aber nur, wenn Sie wollen Datei Leser eine wiederverwendbare Komponente machen, Sie könnten möglicherweise diese oder besser nutzen: Verbesserung auf diesem:

inputfilereader.ts

import {Component, ElementRef, EventEmitter} from 'angular2/angular2'; 

@Component({ 
    selector: 'filereader', 
    templateUrl: './commons/inputfilereader/filereader.html', 
    styleUrls: ['./commons/inputfilereader/filereader.css'], 
    providers: [ElementRef], 
    events : ['complete'] 
}) 

export class InputFileReader { 
    complete :EventEmitter = new EventEmitter(); 

    constructor(public elementRef: ElementRef) { 
    } 

    resultSet:any; // dont need it 

    changeListener($event: any) { 
     var self = this; 
     var file:File = $event.target.files[0]; 
     var myReader:FileReader = new FileReader(); 
     myReader.readAsText(file); 
     var resultSet = []; 
     myReader.onloadend = function(e){ 
      // you can perform an action with data read here 
      // as an example i am just splitting strings by spaces 
      var columns = myReader.result.split(/\r\n|\r|\n/g); 

      for (var i = 0; i < columns.length; i++) { 
       resultSet.push(columns[i].split(' ')); 
      } 

      self.resultSet=resultSet; // probably dont need to do this atall 
      self.complete.next(self.resultSet); // pass along the data which would be used by the parent component 
     }; 
    } 
} 

filereader.html

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

Verwendung in anderen Dateien

anotherfile können sagen dfs.ts

import {Component, ElementRef} from 'angular2/angular2'; 
import {InputFileReader} from '../../commons/inputfilereader/inputfilereader'; 

@Component({ 
    selector: 'dfs', 
    templateUrl: './components/dfs/dfs.html', 
    styleUrls: ['./components/dfs/dfs.css'], 
    providers: [ElementRef], 
    directives:[InputFileReader] 
}) 

export class DfsCmp { 
    constructor(public eleRef :ElementRef) {} 

    callSomeFunc(data):void { 
     console.log("I am being called with ", data); 
    } 
} 

dfs.html

<filereader (complete)="callSomeFunc($event)"></filereader> 

Answer 3

Gerade

fr.readAsText(event.files[0]); 

Nach der onLoad Definition hinzufügen.

Ihnen vielleicht dabei helfen kann, das ist meine Upload-Handler-Funktion für die Datei-Upload-Bibliothek von primeng

archivoUploadHandler(event) { 
    let contenido; 
    let fr = new FileReader(); 
    fr.onload = (e) => { 
    contenido = fr.result; 
    console.log(contenido); 
    }; 
    fr.readAsText(event.files[0]); 
}