如何使FileReader与Angular2一起使用？

问题描述：

如何使FileReader与 Angular2 一起使用!!

How to make FileReader work with Angular2!!

使用 Angular2 从客户端读取文件时和打字稿，

When reading a file from client side with Angular2 and Typescript,

我尝试以这种方式使用FileReader：

I try to use FileReader in this way:

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

但它没有'总的来说，这个'fileReader.onload'函数永远不会被调用。

But it doesn't work at all, this 'fileReader.onload' function will never be called.

真的需要一个阅读文件的解决方案，请帮忙。
谢谢

Really need a solution for reading files, please help. Thanks

从在线IDE中查看：

预览：
https://angular2-butaixianran.c9.io/src/index.html

编辑：
https：// ide。 c9.io/butaixianran/angular2

答

首先，您必须在输入表单上指定更改事件的目标在模板中：

First you have to specify the target of the change event on input form in template:

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

如你所见，我绑定了一个 changeListener（）方法（更改）事件。我的类实现：

As you can see I binded a changeListener() method to (change) event. My implementation of class:

  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。

Listener is passing file from event to readThis method. Read this have implemented it's own FileReader. You can also define FileReader in component instead in function.

如何使FileReader与Angular2一起使用？

相关推荐