Angular 8中点击Cancel按钮重置HTML file input及文件展示容器的实现问题

1. 调整HTML模板 #

给Cancel按钮绑定点击事件，传入已定义的模板引用变量#fileUpload用于操作文件输入框DOM，同时补充文件大小展示位：

<div class="container">
   文件名：{{fileName}} <br>
   文件大小：{{fileSize}}
</div>
<input type="file" class="custom-file-input" id="inputGroupFile02" 
       (change)="onSelectFile($event)" accept=".xlsx, .xls, .csv" #fileUpload>
<span class="input-group-text sidebutton" id="" (click)="resetFile(fileUpload)">Cancel</span>

2. 修改组件TS逻辑 #

首先补充需要的响应式属性，调整文件选择逻辑增加大小计算，新增重置方法：

// 组件类内先定义对应属性
selectedFiles: FileList | null = null;
fileName: string = '';
fileSize: string = '';
previews: any[] = [];

onSelectFile(event: any): void {
  this.selectedFiles = event.target.files;
  if (this.selectedFiles?.length) {
    const targetFile = this.selectedFiles[0];
    this.fileName = targetFile.name;
    // 计算文件大小并做单位转换
    const fileByte = targetFile.size;
    if (fileByte < 1024) {
      this.fileSize = fileByte + ' B';
    } else if (fileByte < 1024 * 1024) {
      this.fileSize = (fileByte / 1024).toFixed(2) + ' KB';
    } else {
      this.fileSize = (fileByte / (1024 * 1024)).toFixed(2) + ' MB';
    }
    this.previews = [];
  }
}

// 新增重置方法
resetFile(fileInput: HTMLInputElement): void {
  // 清空所有展示数据
  this.fileName = '';
  this.fileSize = '';
  this.selectedFiles = null;
  this.previews = [];
  // 手动清空file输入框的值，解决重复选择同文件不触发change事件的问题
  fileInput.value = '';
}

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