Angular+TypeScript表单文件上传报错：无法读取文件对象的type属性

嘿，我一眼就看出问题出在你遍历文件列表的方式上了，咱们一步步拆解并修复：

问题根源 #

首先要明确：event.target.files返回的是FileList对象，它不是普通数组，而是一个类数组的只读结构。你用for...in遍历它的时候，会把FileList自带的非文件属性（比如length、item方法）也遍历进来，这时候submittedpdfs[+pdf]就会变成undefined，自然就没法读取type属性了。

另外还有个隐藏坑：你试图直接对FileList调用splice方法，但FileList是只读的，根本没有这个方法，后续也会报错哦。

修复后的代码 #

咱们把FileList转换成真正的数组，用数组的方法来处理就顺畅多了：

// 先定义你要接受的PDF类型，比如标准的application/pdf
const acceptedpdf = "application/pdf";

samplemenuupload(event: Event) {
  // 先获取文件列表，并且做类型断言符合TS规范
  const fileList = (event.target as HTMLInputElement).files;
  // 没有选择文件的话直接返回，避免空指针
  if (!fileList) return;

  // 把FileList转成真正的数组
  let submittedpdfs = Array.from(fileList);
  
  // 用filter方法过滤出符合类型的文件，比手动splice更安全简洁
  submittedpdfs = submittedpdfs.filter(file => file.type === acceptedpdf);
  
  // 现在可以正常处理这些文件啦
  submittedpdfs.forEach(file => console.log(file));
}

几个关键改进 #

• 用Array.from(fileList)把类数组的FileList转成真正的数组，这样就能用数组的所有方法，也不会遍历到额外属性。
• 用filter替代手动遍历+splice：代码更简洁，而且不会去修改只读的FileList，避免不必要的错误。
• 增加了空值判断：防止用户没选文件就触发上传时的报错。
• 加上TypeScript的类型标注：让代码更规范，编辑器也能给你更好的提示。

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