Angular中如何移除input[type=file]多文件选择中的指定文件？

Hey folks! 我之前在Angular项目里刚好碰到过这个需求——用带multiple属性的文件选择框，还要能单独移除已选中的某个文件。其实核心问题是原生的FileList是只读对象，没法直接删除其中的项，所以我们得绕个弯，用数组来维护自己的选中文件列表。下面是我验证过的完整实现方案：

先搞定HTML部分，我们需要文件选择框，再把已选中的文件列表展示出来，每个文件后面加个移除按钮：

<!-- 文件选择框 -->
<input type="file" (change)="onFileChange($event)" #fileInput multiple>

<!-- 已选中文件列表 -->
<div class="selected-files">
  <div *ngFor="let file of selectedFiles; let i = index" class="file-item">
    <span>{{ file.name }} ({{ (file.size / 1024 / 1024).toFixed(2) }} MB)</span>
    <button (click)="removeFile(i)" class="remove-btn">×</button>
  </div>
</div>

接下来在组件类里处理文件选择、移除操作，核心是用数组selectedFiles来替代原生的FileList：

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

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  // 获取文件选择框的DOM引用
  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
  // 用来维护选中文件的数组
  selectedFiles: File[] = [];

  // 处理文件选择事件
  onFileChange(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    
    if (inputElement.files && inputElement.files.length > 0) {
      // 将新选中的文件转成数组，添加到我们的自定义列表中
      const newFiles = Array.from(inputElement.files);
      newFiles.forEach(file => {
        // 可选：避免重复添加相同文件（这里用文件名+大小简单判断，可按需调整）
        const isDuplicate = this.selectedFiles.some(
          existing => existing.name === file.name && existing.size === file.size
        );
        if (!isDuplicate) {
          this.selectedFiles.push(file);
        }
      });

      // 重置文件输入框的value，否则用户无法重复选择同一个文件
      inputElement.value = '';
    }
  }

  // 移除指定索引的文件
  removeFile(index: number): void {
    this.selectedFiles.splice(index, 1);
  }

  // 如果需要上传文件，直接用这个数组构建FormData即可
  uploadFiles(): void {
    const formData = new FormData();
    this.selectedFiles.forEach(file => {
      formData.append('uploadedFiles', file);
    });

    // 这里调用你的HTTP上传方法
    // this.http.post('/api/upload', formData).subscribe(
    //   response => console.log('上传成功', response),
    //   error => console.error('上传失败', error)
    // );
  }
}

• 为什么要重置input.value？：原生文件选择框如果选中过某个文件，再次选择同一个文件时不会触发change事件，重置value可以解决这个问题，让用户能重复选择同一文件。
• FileList的限制：原生input.files返回的FileList是只读的，不能直接进行添加、删除操作，所以必须用自定义数组来管理选中的文件。
• 重复文件判断：上面的代码里加了简单的重复校验，如果你需要更精准的判断，可以结合文件的lastModified时间戳来做。

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