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

Question

Я пытаюсь загрузить несколько файлов и также отобразить эти файлы, но если в первый раз пользователь выберет первый файл, а затем снова выберет еще два файла, он перезапишет первый файл еще на два файла.так и должно быть для отображения 3 файлов.как я могу это исправить?

ссылка на стек: https://stackblitz.com/edit/angular-gitter-hvt9w6

<div>
      <h2>file upload</h2>
      <input type="file" multiple (change)="onChange($event, showFileNames)" />
      <input #showFileNames />
      <button>upload</button>
    </div>




 onChange(event: any, input: any) {
    let files = [].slice.call(event.target.files);

    input.value = files.map(f => f.name).join(', ');

Answer 1

Добавьте дополнительную переменную «storage» и concat каждый раз с выбранными файлами.:) Предупреждение: вам, вероятно, придется добавить какое-то обнаружение относительно того, каких файлов, которые вы пытаетесь добавить в «хранилище», еще нет (возможно, лучше использовать forEach в массиве файлов, а затемpush новые элементы в «хранилище», отметьте Example 2)

Пример 1 (concat, проверка на отсутствие дубликатов):

<div>
  <h2>file upload</h2>
  <input type="file" multiple (change)="onChange($event, showFileNames)" />
  <input #showFileNames />
  <button>upload</button>
</div>



storedFiles = [];
onChange(event: any, input: any) {
  let files = [].slice.call(event.target.files);
  this.storedFiles = this.storedFiles.concat(files);

  input.value = this.storedFiles.map(f => f.name).join(', ');
}

Пример 2 (forEach и проверка имени файла длядубликаты)

storedFiles = [];
onChange(event: any, input: any) {
  let files = [].slice.call(event.target.files);
  files.forEach((file) => {
    let found = false;
    for (let i = 0; i < this.storedFiles.length; i++){
      if (file.name == this.storedFiles[i].name){
        found = true;
        break;
      }
    }
    if (!found) this.storedFiles.push(file);
  });

  input.value = this.storedFiles.map(f => f.name).join(', ');
}

Я зацикливаюсь на сохраненных файлах с помощью обычного цикла for, а не цикла forEach, чтобы иметь возможность его замкнуть (break), поскольку, если обнаружен один дубликат, вы ненадо искать другого.