Angular - прочитать файл и проанализировать его содержимое

У меня есть элемент управления загрузкой файлов, который содержит выбранный файл, как показано ниже,

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

У меня есть кнопка отправки, как показано ниже,

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

Когда я выбираю файл и нажимаю на кнопку загрузки файла, мне нужно содержимое внутри файла, не отправляя его на сервер и читая оттуда.

Примечание. Тип файла будет csv

Ответ 1

Вы можете использовать FileReader в javascript для достижения этого как файла csv

Добавьте событие изменения файла, чтобы сохранить файл в объекте, как показано ниже,

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

</div>

Функция должна установить файл для объекта, который используется позже

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

При нажатии кнопки отправки вы можете использовать метод readAsText() FileReader в javascript, чтобы получить содержимое, как показано ниже,

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

Примечание: onload событие будет запущено после чтения содержимого, чтобы ваша логика находилась внутри функции onload.

Ответ 2

вы вытаскиваете файл из ввода и используете API FileReader

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

Ответ 3

Для тех, кто спрашивает, как получить строковые данные после их чтения, данные находятся в свойстве result fileReader. Проверьте пример кода ниже.

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