Angular/TypeScript中清理文件输入事件及解决重复图片问题

核心问题排查 #

1. 数据结构未彻底清空：你仅清空了linkedListArray和imageList的length属性，但this.files数组一直在累积之前的文件；同时自定义链表imageList仅修改length无法真正删除节点，导致新上传时旧节点被重新转换为数组展示。
2. 重复事件绑定：模板绑定的(drop)、(dragover)与组件的@HostListener重复监听事件，可能触发多次处理逻辑。
3. 文件输入框未重置：注释了输入框重置代码，可能导致重复选择文件时无法触发change事件（辅助修复项）。

具体修复步骤 #

1. 彻底重置所有数据结构 #

修改uploadImage和closeModal方法，直接重置数组并重新初始化链表（如果链表服务有创建新实例的方法）：

uploadImage(vehicle: Vehicle): void {
  this.uploadVehicle = vehicle;
  this.linkedListArray = []; // 直接赋值为空数组，比length=0更可靠
  this.imageList = this.linkedListService.createNewLinkedList(); // 重新创建链表实例
  this.files = []; // 清空文件数组
  this.showModal = true;
}

closeModal(){
  console.log("clicked");
  // 先释放Object URL避免内存泄漏
  this.linkedListArray.forEach(image => URL.revokeObjectURL(image.url));
  this.linkedListArray = [];
  this.imageList = this.linkedListService.createNewLinkedList();
  this.files = [];
  this.showModal = false;
  this.logLists();
}

如果linkedListService没有创建新链表的方法，手动遍历删除所有节点，而非仅修改length属性。

2. 移除重复的事件绑定 #

删掉组件中的@HostListener装饰器，保留模板中的事件绑定，同时简化事件处理方法：

onDragOver(event: DragEvent) {
  event.preventDefault();
  event.stopPropagation();
}

onDrop(event: DragEvent) {
  event.preventDefault();
  event.stopPropagation();
  if (event.dataTransfer) {
    this.handleFiles(event.dataTransfer.files);
  }
}

3. 修复文件输入框重置 #

取消onFileInputChange中的注释代码，确保输入框每次处理后重置：

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

  inputElement.value = ''; // 重置输入框
  console.log('cleared');
}

4. 优化重复文件判断（可选） #

当前仅通过文件名判断重复，可结合文件大小和修改时间提升准确性：

const isDuplicate = this.linkedListArray.some(image => 
  image.name === fileName && 
  image.blob.size === file.size && 
  new Date((image.blob as any).lastModified) === new Date(file.lastModified)
);

内容的提问来源于stack exchange，提问作者Andrew Ericson