Javascript 如何使FileReader与Angular2一起工作？

如何使FileReader与Angular2一起工作

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

我尝试以以下方式使用FileReader：

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

但它根本不起作用，这个“fileReader.onload”函数永远不会被调用

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

从联机IDE检查此项：

预览：

编辑:

---

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

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

---

侦听器正在将文件从事件传递到

readThis

方法。阅读本文，您已经实现了自己的

FileReader

。您也可以在组件中定义FileReader，而不是在函数中定义。

来自@haz111的回答已经起作用了，但如果您想使FileReader成为一个可重用的组件，您可以使用此选项或更好的选项：改进此选项：

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

dfs.html

<filereader (complete)="callSomeFunc($event)"></filereader> 

只需添加

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

在onLoad定义之后

也许这可以帮助你，这是我的上传处理函数的文件上传库的

---

来这里参加聚会有点晚了。这也可以通过创建FileReader as服务来完成。这将有助于单元测试，并将FileReader与使用它的组件分离

您可以像这样创建令牌：

export const FileReaderService = new InjectionToken<FileReader>('FileReader', {
  factory: () => new FileReader(),
});

---

我将创建一个如下所示的方法

readFileContent(file: File): Promise<string | ArrayBuffer> {
    return new Promise<string | ArrayBuffer>((resolve, reject) => {

      const myReader: FileReader = new FileReader();

      myReader.onloadend = (e) => {
        resolve(myReader.result);
      };

      myReader.onerror = (e) => {
        reject(e);
      };

      myReader.readAsText(file);
    });
  }

---

readThis（inputValue:any）：void{var file:file=inputValue.files[0]；var myReader:FileReader=new FileReader（）；…同样有效..我认为看起来更干净..非常感谢这项工作，很好，但我想添加一些内容。出于某种原因（至少在我的情况下）如果您仅在“changeListener”方法中使用所有选项，则此选项将不起作用。出于某种原因（我不知道），如果您在changeListener中使用“myReader.onloadend（…）”，则永远不会触发此选项。@haz111此readAsText（）是否返回任何文件的base64？我想对上载的文件进行base64编码

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

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

export const FileReaderService = new InjectionToken<FileReader>('FileReader', {
  factory: () => new FileReader(),
});

class MyService { // this could be a component too
  constructor(@Inject(FileReaderService) private reader: FileReader) {}
  readFile() {
    const file = // the file you want to read
    this.reader.onload = // whateever you need
    this.reader.readAsDataURL(file)
  }
}

readFileContent(file: File): Promise<string | ArrayBuffer> {
    return new Promise<string | ArrayBuffer>((resolve, reject) => {

      const myReader: FileReader = new FileReader();

      myReader.onloadend = (e) => {
        resolve(myReader.result);
      };

      myReader.onerror = (e) => {
        reject(e);
      };

      myReader.readAsText(file);
    });
  }

const content = await this.readFileContent(inputValue.files[0])