• 组件本身默认直接渲染子节点，若指定了filesRenderer，则会额外渲染已选文件
• 优先使用showOpenFilePicker(检测到当前浏览器不支持该 API)，若不支持则改为 input，可通过preferFileApi属性修改该行为

基本使用

多选

通过multiple属性可开启多选，通过maxCount属性限制文件数量，多选择的文件会被忽略，可通过exceedMaxCount事件检查哪些文件被忽略

目录

通过directory属性可开启目录选择

拖拽

通过drop属性可开启拖拽上传，将文件拖拽到组件本身（包含 slot 内的触发元素）即可触发选择。组件会在拖拽进入时添加dragging状态，便于自定义样式

拍照 / 录像

通过capture属性可在移动端直接调起摄像头或麦克风，可选值：

• "user" 前置摄像头
• "environment" 后置摄像头
• true 由浏览器自行选择
• 仅当移动端使用 input 兜底时生效（非 file system access API）

取消事件

file-picker在取消文件选择时会触发cancel事件，内部采用了兼容方式实现：

• 若使用文件系统 API，在 AbortError 时触发 cancel
• 若使用 input 且浏览器支持input cancel事件，input 触发 cancel 时往外抛出 cancel
• 上面两个兼容性均不佳，所以会同时使用 pointerover, pointerdown, keydown, visibilitychange 事件共同监听，支持移动端

兼容实现的逻辑

模拟实现 input cancel 事件目前没有一个完美的解决方案，focus 事件没有用，目前检查文件选择是否被取消的时机是：

• pointerdown 或 keydown 触发（文件选择时的 esc 不会触发 keydown）
• 连续两次（小于 50ms）pointermove 触发（检测两次是因为 Chromium 中，鼠标从文件窗口移到外面也会触发一次 pointermove。。。）
• 支持 touch 的设备（不包含 ios 和 ipad）会额外检测 visibilitychange 事件。在触屏 windows 设备中，选择文件时不会触发 visibilitychange（有待更多测试）；在安卓中，选择文件会使页面进入后台，IOS 则不会（所以在不支持 cancel 事件的 IOS 中，取消选择后必须摸一次屏幕才会检测到，体验不行，暂未找到解决方案）

限制大小

通过maxSize可限制选择文件的大小，单位为字节，超过大小的文件会被忽略，可通过exceedMaxSize事件检查哪些文件被忽略

类型校验

配合strictAccept开启严格类型校验时，文件类型不符的会被忽略，可通过typeMismatch事件拿到这些文件并提示用户

Props