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

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

添加一个额外的"存储"变量，每次都将其与所选文件一起concat。 :) 警告：您可能必须添加某种检测，以检测您尝试添加到"存储"中的任何文件尚不存在(最好在文件数组上使用forEach，然后将新元素push到"存储"，检查Example 2(

示例 1(连接，无重复检查(：

<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(对于每个并检查文件名中是否存在重复项(

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( 它，因为如果找到一个重复项，则无需搜索另一个。