删除通过 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) {&nbsp; let files = e.target.files;&nbsp; for (let i = 0; i < files.length; i++) {&nbsp; &nbsp; if (arr.indexOf(files[i].name) === -1) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;arr.push(files[i]);&nbsp; &nbsp; }&nbsp; }}