Angular5中选择同一文件时HTML input文件change事件不触发，重置无效

我之前在Angular项目里也碰到过一模一样的问题——浏览器的input[type=file]元素默认只有当选中的文件路径发生变化时才会触发change事件，连续选同一个文件时路径没变化，事件自然就不触发了。你尝试的原生onclick="this.value=null"方案在Angular环境下失效，大概率是因为Angular的模板表达式上下文和原生JS的this指向不一样，没法正确清空input的value。

给你几个在Angular 5里亲测有效的解决方案：

方案一：用模板引用变量直接清空（最简单） #

直接在模板里用Angular的模板引用变量，在点击事件里清空input的value：

<input type="file" class="upload-file" #fileInput (click)="fileInput.value=''" (change)="handleFileInput($event.target.files,'doc')">

原理很简单：每次点击选择文件时，先把input的value置空，这样哪怕选同一个文件，input的value也是从空变成文件路径，change事件就会正常触发了。

方案二：通过ViewChild获取元素操作（更灵活） #

如果需要在组件类里做更多逻辑处理，比如上传完成后再清空，可以用ViewChild获取input元素的引用：
首先在组件类里引入ViewChild和ElementRef：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;

  handleFileInput(files: FileList | null, type: string) {
    if (files && files.length > 0) {
      // 这里写你的文件上传逻辑，比如调用接口上传文件
      console.log('选中的文件：', files[0]);
      
      // 上传完成后也可以清空input，方便下次选择
      this.fileInput.nativeElement.value = '';
    }
  }

  clearFileInput() {
    this.fileInput.nativeElement.value = '';
  }
}

然后在模板里绑定点击事件和change事件：

<input type="file" class="upload-file" #fileInput (click)="clearFileInput()" (change)="handleFileInput($event.target.files,'doc')">

方案三：处理完文件后立即清空 #

另一种思路是在change事件处理完成后直接清空input的value，这样下次选同一文件时也能触发事件：
修改你的handleFileInput方法，记得把$event传进来：

handleFileInput(files: FileList | null, type: string, event: Event) {
  if (files && files.length > 0) {
    // 处理文件上传逻辑
    // ...
    
    // 处理完成后清空input值
    const fileInput = event.target as HTMLInputElement;
    fileInput.value = '';
  }
}

模板里改成：

<input type="file" class="upload-file" (change)="handleFileInput($event.target.files,'doc', $event)">

这三个方案都能解决你遇到的问题，推荐先试试方案一，最简洁高效。

内容的提问来源于stack exchange，提问作者shamon shamsudeen