Jak sprawić, aby FileReader działał z Angular2

Question

Jak sprawić, aby FileReader działał z Angular2 !!

Podczas odczytu pliku z po stronie klienta z Angular2 i maszynopis,

próbuję użyć FileReader w ten sposób:

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

Ale to nie działa w ogóle, to „FileReader Funkcja .onload nigdy nie zostanie wywołana.

Naprawdę potrzebujesz rozwiązania do czytania plików, proszę o pomoc. Dzięki

Sprawdź to z IDE internetowym:

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

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

Answer 1

Najpierw trzeba określić cel tego wydarzenia Zmiana w postaci wejścia w szablonie:

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

Jak widać, powiązano metodę changeListener() z wydarzeniem (change). Moja implementacja klasy:

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); 
    } 

słuchacz przechodzi plik z imprezy do readThis metody. Przeczytaj to zaimplementował swój własny FileReader. Możesz także zdefiniować FileReader w komponencie zamiast w funkcji.

Answer 2

odpowiedź od @ haz111 już działa, ale tylko w przypadku, gdy chcesz, aby czytelnik plik komponent wielokrotnego użytku, można ewentualnie użyć tego czy lepiej: poprawić to:

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)" /> 

Wykorzystanie w innych plikach

anotherfile powiedzmy 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

Wystarczy dodać

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

Po definicji onLoad.

Może to może pomóc, to jest mój funkcja wysyłania obsługi dla biblioteki przesyłania plików z primeng

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