web-dev-qa-db-fra.com

Angular - Lit un fichier et analyse son contenu

J'ai le contrôle de téléchargement de fichier qui contient le fichier sélectionné comme ci-dessous,

<div class="Block">
  <label id="lbl">File </label>
  <input #fileInput type='file'/>
</div>

J'ai un bouton de soumission comme ci-dessous,

<button type="button" class="btn btn-primary" 
     (click)="uploadDocument()">Upload File</button>

Lorsque je sélectionne un fichier et que je clique sur le bouton de téléchargement, le fichier me faut le contenu du fichier sans l'envoyer au serveur ni le lire à partir de celui-ci.

Remarque: le type de fichier sera csv

angularangular5
27
Karthik

Vous pouvez utiliser FileReader en javascript pour y parvenir en tant que fichier csv.

Ajouter un événement de changement de fichier pour stocker le fichier dans un objet comme ci-dessous,

<div class="Block">
  <label id="lbl">Code </label>
  <input type='file' (change)="fileChanged($event)">

</div>

La fonction doit définir le fichier sur un objet utilisé ultérieurement.

file:any;
fileChanged(e) {
    this.file = e.target.files[0];
}

Lorsque le bouton de soumission est cliqué, vous pouvez utiliser la méthode readAsText() de FileReader en javascript pour obtenir le contenu ci-dessous,

uploadDocument(file) {
    let fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(fileReader.result);
    }
    fileReader.readAsText(this.file);
}

Note: L'événement onload sera déclenché après la lecture du contenu. Votre logique doit donc être dans la fonction onLoad.

40
Aravind

vous extrayez le fichier de l'entrée et utilisez l'API FileReader

readFile(file: File) {
    var reader = new FileReader();
    reader.onload = () => {
        console.log(reader.result);
    };
    reader.readAsText(file);
}
6
bryan60

Pour ceux qui demandent comment obtenir des données de chaîne après les avoir lues, les données se trouvent dans la propriété result de fileReader. Vérifiez l'exemple de code ci-dessous.

    let fileString:any= "";

    uploadDocument(file) {
        let fileReader = new FileReader();
        fileReader.onloadend = (e) => {
           //console.log(myReader.result);
           // Entire file
           console.log(myReader.result);

           // By lines
           var lines = myReader.result.split('\n');
           for(var line = 0; line < lines.length; line++){
               console.log(lines[line]);
           }

           this.fileString = myReader.result;
        };

        fileReader.readAsText(this.file);
    }
0
katwekibs