Angular中如何从FileList移除指定对象 解决splice报错问题

• splice 调用报错的核心原因是你定义的selectedFiles类型为FileList，这是浏览器提供的只读类数组对象，本身不挂载数组原型的splice、push等修改方法，无法直接编辑内容。
• 你注释中写的this.selectedFiles.splice(1,2)逻辑也不符合需求：固定传入起始索引1会永远从第二个元素开始删除，和你按文件名匹配删除目标项的逻辑不匹配。

最简便的方案是存储文件时直接把FileList转为普通数组，后续增删操作直接用数组原生方法即可，完全不影响后续文件上传等逻辑。

1. 首先调整属性定义和文件选择时的赋值逻辑

// 直接定义为File数组类型，初始值设为空数组
selectedFiles: File[] = [];
previews: any[] = [];

// 文件选择回调（绑定在input[type=file]的change事件上）
onFileSelect(event: Event) {
  const fileInput = event.target as HTMLInputElement;
  if (!fileInput.files) return;
  // 将只读的FileList转为普通数组存储
  this.selectedFiles = Array.from(fileInput.files);
  // 这里补充你原有的生成预览previews的逻辑即可
}

2. 改造删除方法，用filter实现按条件删除，避免循环+splice的索引错乱问题

deleteImage(preview: any){
  if(!flag){
    // 过滤掉文件名匹配的目标文件
    this.selectedFiles = this.selectedFiles.filter(file => file.name !== preview.imageName);
    // 同步删除对应的预览项
    this.previews = this.previews.filter(item => item.imageName !== preview.imageName);
  }
  console.log(this.previews)
}

特殊场景说明：如果你必须保留selectedFiles为FileList类型，由于FileList只读无法直接修改，删除目标项后需要借助DataTransfer对象构造全新的FileList再赋值，实际开发中直接使用File数组的方案维护成本更低，上传时将数组逐个append到FormData中即可正常使用。

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