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

6
angular angular5

2 ответов

можно использовать FileReader в javascript для достижения этого, как его

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

<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 событие будет уволен после содержимое читается, поэтому ваша логика должна быть внутри .

8

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

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