如何清除 Angular / Typescript 中的文件输入事件？

问：

我正在构建一个图像上传门户，该门户打开一个模式并允许用户将图像文件拖放到上传 div 中。这是有效的，图像得到了处理，但是我遇到了一个问题，当我再次为不同的项目打开模式并尝试上传不同的图像时，当我将其拖入时，突然间我之前上传的所有其他图像都出现了，即使我已经清除了填充它的对象数组并尝试清除事件。

我已将“stopImmediatePropogation（）”放在主机侦听器的末尾

  @HostListener('dragover', ['$event'])
  onDragOver(event: DragEvent) {
    event.preventDefault();
    event.stopImmediatePropagation();
  }
  
  @HostListener('drop', ['$event'])
  onDrop(event: DragEvent) {
    event.preventDefault();
    if (event.dataTransfer) {
      this.handleFiles(event.dataTransfer.files);
    }
    event.stopImmediatePropagation();
  }

我尝试了以下几种不同的方法来清除事件/文件输入后处理它们

  onFileInputChange(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    this.handleFiles(inputElement.files);

    //inputElement.type = 'text';
    //inputElement.value = ''; 
    event.stopImmediatePropagation();
    event.stopPropagation();
    console.log('cleared');  //this never executes
  }

当关闭模态并打开一个新模态时，我会清除所有与之交互并填充它的结构

  uploadImage(vehicle: Vehicle): void {
    this.uploadVehicle = vehicle;
    this.linkedListArray.length = 0;
    this.imageList.length = 0;
    this.showModal = true;
  }

编辑：这是前端代码：

<div class="file-upload upload-modal" *ngIf="showModal">

  <h3>Upload images for {{ uploadVehicle.Year }} {{ uploadVehicle.Make }} {{ uploadVehicle.Model }}</h3>

    <div
      class="drop-zone"
      (drop)="onDrop($event)"
      (dragover)="onDragOver($event)"
    >
      <p>Drag and drop files into the window, or click to select files - then click the <span class="highlight">showcase image</span></p>
      <input
        type="file"
        id="fileInput"
        style="color:transparent; width:120px;"
        multiple
        (change)="onFileInputChange($event)"
      />

      
    </div>

    <div class="file-list" id="file-list">

        <div *ngFor="let image of linkedListArray; let i = index">
          <img (click)="activateClass(image)" [ngClass]="{'active': image.active}" class="uploadedImage" [src]="image.url" alt="{{ image.name }}" />
        </div>

    </div>

    <br>    

    <div class="modal-button-container">
    <button type="button" (click)="closeModal()" class="btn btn-secondary">Cancel</button>
    <button type="button" class="btn btn-primary">Upload</button>
    </div>

  </div>
</div>

这是 closeModal 函数，我再次尝试清除所有内容

  closeModal(){
    console.log("clicked");
    this.linkedListArray.length = 0;
    this.imageList.length = 0;
    this.showModal = false;
    this.logLists();
  }

另外，这里是 handleFiles（） 函数。我在这里添加了一些规定，以防止重复的图像文件继续存在，尽管我不确定它是否正常工作：

  private handleFiles(files: FileList | null) {
    if (files) {

      for (let i = 0; i < files.length; i++) {

        const file: File = files[i];
        const fileName = file.name;

        console.log(fileName);
        
        // Check if an image with the same name already exists in the array
        const isDuplicate = this.linkedListArray.some(image => image.name == fileName);
        const ext = '.' + fileName.split('.').pop();

        if ( (ext == '.png' || ext == '.jpg' || ext == '.jpeg') && !isDuplicate){
          this.files.push(files[i]);
          const imageObject: ImageObject = {
            id: i,
            name: file.name,
            blob: new Blob([file], { type: file.type }),
            active: false
          };
  
          imageObject.url = URL.createObjectURL(imageObject.blob);
    
          // Add it to the array
          this.imageList.append(imageObject);
          this.linkedListArray = this.linkedListService.linkedListToArray(this.imageList);
        }
      }      
    }
    let FileList = <HTMLElement>document.getElementById("file-list");
    setTimeout(() => FileList.scrollTop = 0, 300); 
    //files = null;
  }