如何使FileReader与Angular2一起工作

发布时间：2020-12-17 09:41:45 所属栏目：安全来源：网络整理

导读：如何使FileReader与Angular2一起使用！从客户端用Angular2和Typescript读取文件时, 我以这种方式尝试使用FileReader： var fileReader = new FileReader();fileReader.onload = function(e) { console.log("run fileReader.onload"); // ......} 但它根本不

如何使FileReader与Angular2一起使用！

从客户端用Angular2和Typescript读取文件时,

我以这种方式尝试使用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

首先,您必须在模板中的input表单上指定change事件的目标：

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

可以看到我将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);
  }

侦听器将文件从事件传递到readThis方法.阅读这个已经实现了它自己的FileReader.您也可以在函数中定义FileReader在组件中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!