如何使FileReader与Angular2一起使用!
从客户端用Angular2和Typescript读取文件时,
我以这种方式尝试使用FileReader:
var fileReader = new FileReader(); fileReader.onload = function(e) { console.log("run fileReader.onload"); // ...... }@H_403_6@但它根本不起作用,这个’fileReader.onload’函数永远不会被调用.
从在线IDE检查:
首先,您必须在模板中的input表单上指定change事件的目标:
@View({ template:` <div> Select file: <input type="file" (change)="changeListener($event)"> </div> ` })@H_403_6@可以看到我将changeListener()方法绑定到(更改)事件.我的班级实施:
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); }@H_403_6@侦听器将文件从事件传递到readThis方法.阅读这个已经实现了它自己的FileReader.您也可以在函数中定义FileReader在组件中.