Question

我正在尝试上传多个文件并显示这些文件，但如果用户第一次选择第一个文件然后再选择两个文件，那么它会将第一个文件覆盖到另外两个文件。它应该是显示3个文件的方式。我该如何解决这个问题？

stackblitz link：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

每次添加一个额外的“存储”变量和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循环遍历storedFiles，而不是forEach循环，以便能够短路（break）它，因为如果找到一个副本，则不需要搜索另一个副本。

多个文件上传和单个文件，然后显示所有这些文件

1 个答案: