flat-drop-files：实现拖放文件处理的简洁解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00724/article/details/148269727

flat-drop-files：实现拖放文件处理的简洁解决方案

flat-drop-files Normalize the DataTransferItems interface from a drop event 项目地址: https://gitcode.com/gh_mirrors/fl/flat-drop-files

项目介绍

flat-drop-files 是一个旨在简化 Web 应用中拖放文件处理流程的开源项目。它基于 Web 的拖放接口 DataTransfer，旨在解决该接口在使用过程中遇到的各种复杂性和易出错的问题。通过提供标准化的文件列表输出，flat-drop-files 允许开发者轻松地收集和处理用户拖放到页面上的文件和文件夹。

项目技术分析

flat-drop-files 利用 DataTransfer.items 列表作为输入，输出一个包含 FileSystemFileHandle 类型的 handle 属性和重建的相对文件路径 path 属性的标准化文件列表。以下是项目的一些核心技术特性：

递归收集目录内文件：自动遍历文件夹中的所有文件，无需手动处理嵌套目录结构。
重建嵌套文件路径：准确恢复拖放文件的原始相对路径，便于进行文件操作。
处理大量文件：支持分页遍历包含超过100个文件的目录。
忽略垃圾文件：自动识别并忽略如 .DS_Store 等不必要的文件。

项目利用了 Web 的最新技术，如 FileSystemFileHandle，但需要注意的是，TypeScript 尚不支持这一对象。因此，flat-drop-files 包含了 @types/wicg-file-system-access 模块以提供类型填充，直到 TypeScript 完全支持。

项目及技术应用场景

flat-drop-files 适用于任何需要用户通过拖放方式上传文件的应用。以下是几个典型的使用场景：

在线文件管理器：允许用户通过拖放来上传、管理文件和文件夹。
图片编辑工具：用户可以拖放图片文件进行编辑。
文档处理应用：支持拖放文档进行预览或处理。

以下是一个简单的示例代码，展示了如何使用 flat-drop-files 来处理拖放事件：

import { getFilesFromDataTransferItems } from "@placemarkio/flat-drop-files";

const zone = document.getElementById('zone');

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
});

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
});

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  getFilesFromDataTransferItems(e.dataTransfer.items).then(files => {
    console.log(files);
  });
});