Come rendere il lavoro FileReader con Angular2

Question

Come rendere il lavoro FileReader con Angular2 !!

Durante la lettura di un file dal lato client con Angular2 e tipografico,

Io cerco di usare FileReader in questo modo:

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

Ma non funziona affatto, questo 'FileReader La funzione .onload 'non verrà mai chiamata.

ha realmente bisogno di una soluzione per la lettura dei file, si prega di aiuto. Grazie

controllare questo da un IDE on-line:

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

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

Answer 1

Prima di tutto bisogna specificare la destinazione della manifestazione cambiamento sul modulo di input a modello:

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

Come potete vedere I rilegato un metodo changeListener()-(change) evento. La mia implementazione di classe:

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 sta passando il file da evento ad readThis metodo. Leggi questo hanno implementato il proprio FileReader. È inoltre possibile definire FileReader nel componente invece nella funzione.

Answer 2

risposta da @ haz111 funziona già, ma solo nel caso in cui si vuole fare lettore di file un componente riutilizzabile, si potrebbe usare questo o meglio: migliorare su questo:

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

uso in altri file

unaltrofile Diciamo 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

Basta aggiungere

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

Dopo la definizione onLoad.

Forse questo può aiutare, questa è la mia funzione del gestore di caricamento per la libreria upload di file di primeng

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