使用TypeScript过滤FileList时删除图片遇类型错误求助

问题根源 #

你碰到的错误是因为Array.from(fileList!!).filter()返回的是普通File数组（File[]），而FileList是浏览器原生的特殊接口——它不是普通数组，自带item()方法等专属属性，所以普通数组无法直接赋值给FileList类型变量。

方案一：改用File[]作为状态类型（推荐） #

把useState的类型从FileList | null改成File[]，这种方式更适配React的状态管理，数组操作也更灵活：

const [fileList, setFileList] = useState<File[]>([]);

// 若需从input的FileList初始化，可转成数组：
// setFileList(Array.from(e.target.files || []))

const deleteImage = (image: File) => {
  const filteredList = fileList.filter(img => img !== image);
  setFileList(filteredList);
};

方案二：将File[]转为FileList（需保留原类型时用） #

如果业务必须使用FileList类型，可以借助DataTransferAPI创建标准的FileList对象：

const [fileList, setFileList] = useState<FileList | null>(null);

const deleteImage = (image: File) => {
  if (!fileList) return;
  
  const filteredArray = Array.from(fileList).filter(img => img !== image);
  const dataTransfer = new DataTransfer();
  filteredArray.forEach(file => dataTransfer.items.add(file));
  
  setFileList(dataTransfer.files);
};

原理：DataTransfer是浏览器处理文件上传、拖放的原生API，它的files属性就是符合标准的FileList对象，通过将过滤后的文件逐个添加到dataTransfer.items，就能生成合法的FileList。

内容的提问来源于stack exchange，提问作者Captai-N