Angular项目中获取文件webkitRelativePath用于后端的技术求助

我完全懂你现在的困扰——用webkitdirectory上传文件夹时，想拿每个文件的相对路径却碰了壁：既不能直接给FileList调用webkitRelativePath，TypeScript还报错说File类型没这个属性。别慌，我来一步步帮你搞定：

1. 先修正模板里的错误 #

你之前的模板里直接传$event.target.files.webkitRelativePath是错的，因为**webkitRelativePath是单个File对象的属性，不是FileList的**。先把模板改成这样：

<input type="file" id="file" *ngIf="checkboxValue" (change)="handleFileInput($event.target.files)" webkitdirectory multiple>

2. 解决TypeScript的类型报错 #

TypeScript默认的File接口并没有包含webkitRelativePath，所以会出现类型提示错误。这里有两种优雅的解决方式：

方式一：扩展File接口 #

在你的组件文件顶部添加这个接口扩展，让TypeScript识别这个属性：

interface File {
  webkitRelativePath: string;
}

方式二：使用类型断言 #

如果不想扩展接口，也可以在获取属性时用类型断言绕开类型检查：

(file as any).webkitRelativePath

3. 修改组件方法，遍历文件获取相对路径 #

现在在handleFileInput方法里，把FileList转成数组，遍历每个文件拿到对应的相对路径：

handleFileInput(files: FileList | null) {
  if (!files) return;

  // 把FileList转为数组，方便遍历操作
  const fileArray = Array.from(files);
  
  // 遍历收集每个文件和它的相对路径
  const filesWithPaths = fileArray.map(file => {
    return {
      file: file,
      relativePath: file.webkitRelativePath // 用类型断言的话就换成 (file as any).webkitRelativePath
    };
  });

  // 现在就可以把包含相对路径的文件列表传给后端了
  console.log('文件及相对路径:', filesWithPaths);
  // 这里调用你的后端上传接口，比如 this.http.post('/api/upload', filesWithPaths)
}

额外说明 #

webkitRelativePath是支持webkitdirectory属性的现代浏览器（Chrome、Edge、Safari等）提供的属性，主流场景下兼容性没问题；如果你的应用需要兼容老旧浏览器，可能得考虑其他替代方案，但目前大部分场景下这个方案完全可行。

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