Angular多文件上传追加显示问题：如何避免文件被覆盖

这个问题我之前也碰到过！核心原因是你现在每次触发文件选择的change事件时，都直接用新选中的文件替换了之前的内容，没有维护一个持久化的已选文件列表。咱们来一步步解决：

1. 在组件中维护已选文件数组 #

首先，在你的Angular组件类里添加一个数组，用来存储所有用户选中的文件（而不是每次都临时获取）：

// 组件类内部定义
selectedFiles: File[] = [];

2. 修改onChange方法，累计文件而不是替换 #

把原来的onChange方法改成下面这样，实现追加新文件而不是覆盖旧文件：

onChange(event: any, input: any) {
  // 将FileList转换为数组，方便后续操作
  const newFiles = Array.from(event.target.files);

  // 可选：过滤掉重复的文件（避免用户重复选择同一个文件）
  const uniqueNewFiles = newFiles.filter(newFile => 
    !this.selectedFiles.some(existingFile => 
      existingFile.name === newFile.name && existingFile.size === newFile.size
    )
  );

  // 将新文件追加到已选列表中
  this.selectedFiles.push(...uniqueNewFiles);

  // 更新输入框的显示内容，把所有文件名拼接起来
  input.value = this.selectedFiles.map(file => file.name).join(', ');
}

3. 上传时使用维护的文件数组 #

后续执行上传操作时，要从this.selectedFiles数组中取文件，而不是从event.target.files里取，比如构建FormData：

uploadFiles() {
  const formData = new FormData();
  this.selectedFiles.forEach(file => {
    formData.append('files', file); // 'files'对应后端接收的参数名
  });

  // 这里调用你的HTTP服务上传formData
  // this.http.post('/upload', formData).subscribe(...);
}

为什么这样能解决问题？ #

原来的代码每次都只处理当前选中的文件，没有保存之前的选择记录。现在我们用selectedFiles数组持久化存储所有已选文件，每次新选择的文件都会被追加进去，自然就能显示全部3个文件了。

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