pickFile

动态创建文件选择输入框并触发文件选择对话框。

前置依赖

依赖参数

参数名	类型	说明
deps.createElement	Document['createElement']	创建DOM元素
deps.body	HTMLElement & { removeChild: (child: HTMLElement) => HTMLElement }	文档body元素（包含 removeChild 方法）
deps.setTimeout	typeof setTimeout	设置定时器

环境要求

• 浏览器环境: 使用 DOM API 创建和操作文件选择输入框

// 浏览器环境
const deps = {
  createElement: document.createElement.bind(document),
  body: document.body,
  setTimeout
}

函数签名

function pickFile(
  options?: PickFileOptions,
  deps: PickFileDeps
): Promise<File | File[] | null>

interface PickFileOptions {
  accept?: string
  multiple?: boolean
}

interface PickFileDeps {
  createElement: Document['createElement']
  body: HTMLElement & { removeChild: (child: HTMLElement) => HTMLElement }
  setTimeout: typeof setTimeout
}

参数

参数名	类型	必填	说明
options	PickFileOptions	否	文件选择选项
options.accept	string	否	文件类型限制（accept 属性值），例如：'image/', '.pdf,.doc', 'audio/'
options.multiple	boolean	否	是否允许多选
deps	PickFileDeps	是	环境依赖对象

返回值

类型	说明
Promise<File | null>	当 multiple: false 或未设置时，返回单个文件或 null
Promise<File[] | null>	当 multiple: true 时，返回文件数组或 null

注意：返回类型根据 options.multiple 自动推断。单选时返回 File，多选时返回 File[]。如果用户取消选择，两种情况都返回 null。

工作原理

1. 动态创建隐藏的 <input type="file"> 元素
2. 根据 options.accept 设置文件类型限制
3. 根据 options.multiple 设置是否允许多选
4. 将 input 元素添加到文档 body 中
5. 触发 input 元素的 click 事件，打开文件选择对话框
6. 监听 change 事件，获取用户选择的文件
7. 选择完成后自动清理 DOM 元素
8. 如果用户取消选择，在超时后返回 null

此函数通过动态创建隐藏的文件输入框并触发点击事件来实现文件选择功能，避免了在 HTML 中预先放置文件输入框的需要。适用于需要根据用户操作动态触发文件选择的场景。