删除通过 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,2this.files包含文件1,2到目前为止，一切都很好情况2：上传文件1,2上传文件1this.files 包含1,2,1上传文件1this.files 仍包含1,2,1上传文件2this.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]);

    }

  }

}