Skip to content

localFileInput

隐藏 <input type="file"> 的配置与触发,以及从 Ref/数组读取 pending 文件列表。

函数签名

typescript
interface HiddenFileInputLike {
  accept: string
  value: string
  click(): void
  setAttribute(name: string, value: string): void
  removeAttribute(name: string): void
}

type TriggerHiddenFileInputOptions = {
  accept?: string
  multiple?: boolean
}

function pendingFilesFromMaybeRefArray(pendingFiles: unknown): File[]
function resetAndTriggerHiddenFileInputClick(
  input: HiddenFileInputLike | null | undefined,
  options?: TriggerHiddenFileInputOptions,
): input is HiddenFileInputLike

前置依赖

参数名类型说明
inputHiddenFileInputLike页面上的隐藏 file input DOM(由调用方持有)
pendingFilesunknownVue Ref<File[]> 或已是 File[]

参数

参数名类型必填说明
options.acceptstringMIME / 扩展名过滤
options.multipleboolean是否多选
pendingFilesunknown待解析的文件列表或 Ref

返回值

函数类型说明
pendingFilesFromMaybeRefArrayFile[]解 Ref 或返回数组,否则 []
resetAndTriggerHiddenFileInputClickbooleaninput 存在且已 click 为 true(类型谓词)

工作原理

  1. resetAndTriggerHiddenFileInputClick:须在用户点击的同步栈内调用;设置 accept/multiple、清空 valueclick()
  2. 选中结果应在同一 input 的 change 事件中读取。
  3. pendingFilesFromMaybeRefArray:不 import Vue 运行时,手动读取 .value,与 unref 行为一致。

异常

无异常抛出。