如何使FileReader與Angular2一起工作

如何使FileReader與一起使用Angular2 !!如何使FileReader與Angular2一起工作

閱讀時從客戶端文件與Angular2和打字稿，

我嘗試以這種方式使用的FileReader：

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

但它不會在所有的工作，這「的FileReader .onload'函數永遠不會被調用。

真的需要解決方案來閱讀文件，請幫助。感謝

入住這從一個在線IDE：

預覽： https://angular2-butaixianran.c9.io/src/index.html

編輯： https://ide.c9.io/butaixianran/angular2

來源

2015-06-14 butaixianran

首先，你必須指定的模板輸入窗體上的改變事件的目標：

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

正如你所看到的，我將changeListener()方法綁定到(change)事件。我的實現類：

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

監聽器正在將文件從事件傳遞到readThis方法。閱讀這個已經實現了它自己的FileReader。您也可以在組件中定義FileReader，而不是在函數中。從@ haz111

來源

2015-08-04 06:13:03 haz111

readThis（inputValue將：任意）：文件上傳庫我的上傳處理函數void { var文件：文件= inputValue的。文件[0]; var myReader：FileReader = new FileReader（）; ...的工作原理以及..我認爲看起來更清潔..很大的幫助，雖然謝謝 – user3124360

@ user3124360 - 對，我改變了它。謝謝！ – haz111

這工作，很好，但我想補充一些東西。出於某種原因（至少在我的情況下），如果你只用'changeListener'方法完成所有工作，這就不會奏效。出於某種原因（我不知道）如果你在changeListener中使用'myReader.onloadend（...）'，它將不會被解僱。 –

答案已經工作，但以防萬一你想使文件閱讀器可重用的組件，你可能使用或更好：改善這一點：

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

使用在其他文件中

anotherfile可以說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>

來源

2015-12-01 20:34:01 user3124360

只需添加

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

在onLoad定義之後。

也許這可以幫助你，這是對的primeng

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

來源

2017-08-28 16:21:10

如何使FileReader與Angular2一起工作

回答

相關問題