2016-11-28 15 views
3

Я пытаюсь создать форму загрузки в Angular 2 ts (2.2.1), которая позволяет загрузить, например, CSV-файл, но вместо того, чтобы файл отправлялся прямо на службу http, я хочу, чтобы файл сначала проверялся в браузере.Получение данных из FileReader в Angular 2

До сих пор я уже могу загрузить файл и распечатать его в консоли с этим кодом:

  1. Html вход для файла загрузить

    <input type="file" (change)="changeListener($event)" #input /> 
    
  2. В моей угловой составляющей я настроил 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); 
        } 
    } 
    

Этот код отлично работает до сих пор.

Однако я не нашел способ хранить данные у читателя таким образом, чтобы я мог получить доступ к нему с помощью моего углового компонента.

Функция обратного вызова myReader.onloadend() не имеет доступа к переменным компонента. Есть ли способ ввести эти переменные?

Как получить прочитанные данные в переменную fileString в моем компоненте?

ответ

10

Делают это так:

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

Таким образом, вы можете получить доступ к переменным.

Для получения более подробного объяснения: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

+0

Большое вам спасибо. Вы никогда не прекращаете учиться. – kacase

+0

идеальный ответ – MurWade