拖拽多文件至浏览器时获取FileHandle出现undefined问题求助

可能的原因 #

• 拖拽的dataTransfer.items中，索引为1的项不是文件类型：拖拽操作可能混入非文件项（比如拖拽文本片段、网页链接等），这类项的kind属性不是file，调用getAsFileSystemHandle()会直接返回undefined。
• 未对每一项的类型做校验就直接调用API，导致无效项的处理结果不符合预期。

解决方法 #

先过滤出所有kind为file的项，再批量获取文件句柄，同时用Promise.all并行处理异步请求提升效率：

async function handleDrop(e) {
  e.preventDefault();
  const dataTransferItems = Array.from(e.dataTransfer.items);
  
  // 只保留文件类型的拖拽项
  const fileItems = dataTransferItems.filter(item => item.kind === 'file');
  
  // 并行获取所有文件的FileSystemHandle
  const fileHandles = await Promise.all(
    fileItems.map(item => item.getAsFileSystemHandle())
  );
  
  console.log(fileHandles, '所有有效文件的handle');
}

额外说明 #

如果需要兼容更旧的场景，也可以通过e.dataTransfer.files获取File对象数组，再结合FileSystemHandle的相关API转换，但直接处理dataTransfer.items并过滤类型是更可靠的方式。

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