Angular中如何移除FileList内指定文件？FileList无splice方法

FileList是只读的类数组对象，并非真正的JavaScript数组，所以它不包含splice这类数组修改方法，这就是调用splice时报错的原因。不过它实现了可迭代接口，支持通过索引访问元素和length属性，因此for循环可以正常遍历。

要删除FileList中的元素，需要先将其转换为普通数组进行操作，若需要还原为FileList结构，可借助DataTransfer对象：

步骤1：将FileList转为普通数组 #

可以用Array.from或扩展运算符：

// 方法一：Array.from
const fileArray = Array.from(this.file.files);
// 方法二：扩展运算符
const fileArray = [...this.file.files];

步骤2：删除指定索引的元素 #

对普通数组使用splice：

fileArray.splice(index, 1);

步骤3：转回FileList（可选） #

如果需要把处理后的文件集合绑定到表单元素，可通过DataTransfer生成新的FileList：

const dataTransfer = new DataTransfer();
fileArray.forEach(file => dataTransfer.items.add(file));
// 替换原FileList
this.file.files = dataTransfer.files;

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