Angular: FileReader - хранить файлы из папки ввода в массив

Question

У меня есть вход, с помощью которого я загружаю папку:

<div class="form-group">
        <input type="file" id="file" (change)="readInput($event)" webkitdirectory directory multiple >
</div>

Папка содержит несколько различных файлов CSV.Для обработки ввода у меня есть Filereader.

readInput(fileChangeEvent: Event) {
return new Observable<any>(obs => {
    const file = (fileChangeEvent.target as HTMLInputElement).files[0];
    if (file) {
      const fileReader = new FileReader();
      fileReader.onload = e => {
        obs.next({
          result: fileReader.result
        });
      };
      fileReader.readAsText(file);
    }
  });
}

Теперь, Observable моего Filereader, похоже, возвращает содержимое случайного файла из папки.То, что я хотел бы сделать, это сохранить различные файлы Files в массиве, чтобы я мог получить к ним доступ позже в коде.

Я пытался добавить результат в массив в наблюдаемой:

filearray = []

    readInput(fileChangeEvent: Event) {
    return new Observable<any>(obs => {
        const file = (fileChangeEvent.target as HTMLInputElement).files[0];
        if (file) {
          const fileReader = new FileReader();
          fileReader.onload = e => {
            obs.next({
                 this.filearray.push(result);
            });
          };
          fileReader.readAsArrayBuffer(file);
        }
      });
    }

но это привело к тому, что массив стал пустым.

Как я могу сохранить файлы в массиве?Существуют ли более простые способы обработки ввода в папке, чем FileReader?

Answer 1

Я бы предложил использовать пакет npm, такой как angular-file-uploader

Angular File Uploader - это модуль Angular 2/4/5/6 для загрузки файлов с Real-Time Progress Bar, угловая универсальная совместимость и несколько тем, которые включают в себя перетаскивание и многое другое.

Демо: https://kzrfaisal.github.io/#/afu

---

Вот один пример Как обрабатывать загрузку папок в Angular , если вы хотите реализовать собственное решение.

---

Один полный пример Создание компонента загрузки файлов в Angular с полным github repo для клонирования.

Answer 2

Вы загружаете папку и получаете доступ только к одному файлу из папки (file[0]).

Если вам нужно прочитать все файлы, вы можете попробовать что-то вроде этого:

readInput(fileChangeEvent: Event) {
   this.readFile(0, files);
}

private readFile(index, files) {
    const reader = new FileReader();
    if (index >= files.length ) {
      console.log(this.files);
      obs.next({result: this.files});
      return;
    }
    const file = files[index];
    reader.onload = (e: any) => {
      const bin = e.target.result;
      this.files.push(e.target.result);
      this.readFile(index + 1, files);
    };
      reader.readAsBinaryString(file);
  }

Демо: https://codesandbox.io/embed/angular-joe2p