删除通过 html 输入上传的重复文件不起作用

Question

我目前正在构建一个文件上传，我可以上传一个或多个 .xml 文件。

    <button mat-raised-button class="button" (click)="fileInput.click()"
        <span>Choose files</span>
        <input #fileInput type="file" multiple accept=".xml" style="display:none;" (change)="onFileInput($event)">
    </button>

onFileInput 方法将这些文件推送到一个数组中。

onFileInput($event) {
   Array.from($event.target.files).forEach(file => {
     this.files.push(file);
   })
   this.files = [...new Set(this.files)];
}

问题是如果我改变上传文件的数量，我可以多次上传同一个文件。

案例 1： 上传文件 1,2
上传文件 1,2
this.files 包含文件 1,2

到目前为止一切顺利

案例 2： 上传文件 1,2
上传文件 1
this.files 包含 1,2,1
上传文件 1
this.files 仍然包含 1,2,1
上传文件 2
this.files 包含 1,2,1,2

希望您能理解问题并帮助我，因为我找不到我的错误。

提前致谢

Answer 1

你可以简单地通过比较文件名来做到这一点。

arr = [];
function onFileInput(e) {
  let files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    if (arr.indexOf(files[i].name) === -1) { 
       arr.push(files[i]);
    }
  }
}