Téléchargez un fichier et lisez des données avec FileReader dans Angular 2

Question

J'essaie de créer un formulaire de téléchargement dans Angular 2 ts (2.2.1), qui permet par exemple de télécharger un fichier CSV, mais au lieu d'envoyer le fichier directement à un service http, je souhaitez que le fichier soit d'abord validé dans le navigateur.

Jusqu'à présent, je peux déjà télécharger un fichier et l'imprimer dans la console avec ce code:

1. Entrée HTML pour le téléchargement de fichiers

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

2. Dans mon composant angular, j'ai configuré eventListner et le lecteur de fichiers.

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

Ce code fonctionne parfaitement bien jusqu'à présent.

Cependant, je n'ai pas trouvé de moyen de stocker les données du lecteur d'une manière qui me permette d'y accéder avec mon composant angular.

La fonction de rappel myReader.onloadend() n'a pas accès aux variables du composant. Existe-t-il un moyen d'injecter ces variables?

Comment puis-je obtenir les données lues dans la variable fileString de mon composant?

Answer 1

la réponse de mxii se transforme implicitement en chaîne, ce qui ne fonctionnait pas pour moi, peut-être avec les nouvelles versions de angular ce n'est plus autorisé.

ce qui a fonctionné pour moi était;

JSON.parse(fileReader.result as string)