javascript - 在 Angular 2 中使用 FileReader 上传文件和读取数据

Question

我正在尝试在 Angular 2 ts (2.2.1) 中创建一个上传表单，它允许上传例如一个 CSV 文件，但我不想将文件直接发送到 http 服务，而是希望首先在浏览器中验证该文件。

到目前为止，我已经可以使用以下代码上传文件并在控制台中打印它:

1. 文件上传的HTML输入

   <input type="file" (change)="changeListener($event)" #input />
   

2. 在我的 Angular 组件中，我设置了 eventListner 和文件阅读器。

   export class UploadComponent {
   
       public fileString;
   
       constructor() {
           this.fileString;
       }
   
       changeListener($event): void {
               this.readThis($event.target);
           }
   
       readThis(inputValue: any): void {
           var file: File = inputValue.files[0];
           var myReader: FileReader = new FileReader();
           var fileType = inputValue.parentElement.id;
           myReader.onloadend = function (e) {
               //myReader.result is a String of the uploaded file
               console.log(myReader.result);
   
               //fileString = myReader.result would not work, 
               //because it is not in the scope of the callback
           }
   
           myReader.readAsText(file);
       }
   }
   

这段代码到目前为止工作得很好。

但是我还没有找到一种方法来存储来自阅读器的数据，并允许我使用我的 Angular 组件访问它。

myReader.onloadend() 回调函数无权访问组件的变量。有什么方法可以注入(inject)这些变量吗？

如何将读取的数据放入组件中的 fileString 变量中？

Answer 1

这样做:

myReader.onloadend = (e) => {
   console.log(myReader.result);
   this.fileString = myReader.result as string;
};

因此您可以访问您的变量。

更详细的解释:https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions