前端面试：设计一个渐进增强的文件导入流程

题目

桌面 Web 应用需要导入大文件，用户可以点击选择、拖放文件，也可能使用支持 showOpenFilePicker() 的浏览器。请设计完整的前端导入流程：特性检测、回退、取消、进度、无障碍、隐私和失败重试都要考虑。说明哪些能力只能作为增强，不能作为基础依赖。

参考答案

先把统一输入模型定义为 File 或可读取的文件句柄，UI 层只接收“候选文件、来源、大小、类型、状态”。默认路径使用带可见 label 的 <input type="file">，因为它跨浏览器可用；拖放只是同一个输入模型的另一种入口。检测到 window.showOpenFilePicker 且运行在安全上下文时，再由用户点击按钮触发增强路径。增强路径失败、用户取消或权限被拒绝时，保留选择入口并回退到 input，而不是把异常当成不支持。

导入状态可设为 idle → selected → validating → reading → uploading → complete，并有 cancelled、failed 分支。校验文件扩展名、声明的 MIME、实际大小上限和业务格式；前端校验只用于即时反馈，服务端仍须重新校验。大文件按流或分片读取，使用 AbortController 取消读取与上传，重试只重试可安全重放的分片，并显示已完成字节数与剩余估计。

文件名、路径和内容属于用户数据。界面只展示必要元数据，日志不记录内容；预览用完的 object URL 要 revokeObjectURL()。拖放区域必须支持键盘和普通按钮，焦点、错误文本和进度通过语义元素及 live region 告知；不要把拖放作为唯一操作。提交前明确告知何时会上传，用户取消后清理本地引用和未完成任务。

关键难点

showOpenFilePicker() 需要瞬时用户激活，不能在定时器、页面加载或异步链路后偷偷调用；它返回句柄，不等同于已经获得永久读取权限。特性检测也不代表权限一定成功。input 的 accept 是提示，不是安全校验；File.type 也可能为空或由客户端声明。拖放事件要防止默认导航行为，并处理目录、多个文件和超大列表。

常见误区

1. 把 File System Access API 当成所有浏览器的基础能力。
2. 只检查扩展名或 MIME 就信任文件。
3. 让隐藏 input 失去 label、键盘和屏幕阅读器路径。
4. 读取整个大文件到内存，再一次性上传。
5. 用“权限被拒绝”覆盖用户取消、格式错误和网络失败。

取舍分析

统一使用 input 作为可靠基线，覆盖面最好但无法提供句柄级能力；增强 picker 可减少重复选择并支持更细的句柄操作，却受浏览器、HTTPS、用户激活和权限约束。拖放提升桌面效率，却需要额外的键盘替代路径。客户端预校验能缩短反馈时间，服务端校验才能形成安全边界。分片与断点续传增加状态复杂度，但能降低大文件失败重传成本。

可运行示例

async function chooseFiles(input) {
  if (window.showOpenFilePicker && window.isSecureContext) {
    try {
      const handles = await window.showOpenFilePicker({ multiple: true });
      return Promise.all(handles.map((handle) => handle.getFile()));
    } catch (error) {
      if (error?.name !== "AbortError") throw error;
    }
  }
  return Array.from(input.files ?? []);
}

调用必须直接来自用户点击事件；生产代码还应限制类型、数量和大小，并把异常映射为用户可理解的状态。拖放处理器可以把 event.dataTransfer.files 转成相同数组，再走同一校验和上传状态机。

面试官可能追问

为什么不能在页面加载时直接调用 showOpenFilePicker()？因为规范要求瞬时用户激活，异步或后台调用会被浏览器拒绝。accept 能防病毒吗？不能，它只是选择器提示，安全检查必须在服务端完成。为什么需要回退？浏览器支持和权限会变化，基础流程必须在广泛可用的 input 上成立。

追问及应对

如何测试回退路径？

用不支持该 API 的浏览器、非安全上下文、用户取消和权限拒绝分别测试；断言 UI 仍能通过 input 完成导入。

如何避免大文件占满内存？

使用 File.slice() 或流式读取，限制并发，上传分片并在取消时调用 AbortController。

如何保证无障碍？

保留真实 label 和按钮，拖放区可聚焦，键盘可触发 input，错误与进度使用关联文本和 live region。

哪些指标能证明设计有效？

记录各入口成功率、取消率、校验失败率、重试后完成率、首个进度反馈时间和不同浏览器的回退比例，且不记录文件内容。