如何使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

答

首先，你必须指定的模板输入窗体上的改变事件的目标：

@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

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>

答

只需添加

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

如何使FileReader与Angular2一起工作

相关推荐