useFileDialog

Demo

使用方法

import { useFileDialog } from '@vueuse/core'

const { files, open, reset, onCancel, onChange } = useFileDialog({
  accept: 'image/*', // 设置仅接受图像文件
  directory: true, // 如果设置为 true，则选择目录而不是文件
})

onChange((files) => {
  /** 处理文件 */
})

onCancel(() => {
  /** do something on cancel */
})

vue

<template>
  <button type="button" @click="open">
    Choose file
  </button>
</template>

类型声明

typescript

export interface UseFileDialogOptions extends ConfigurableDocument {
  /**
   * @default true
   */
  multiple?: boolean
  /**
   * @default '*'
   */
  accept?: string
  /**
   * 选择捕获文件的输入源。
   * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
   */
  capture?: string
  /**
   * 打开文件对话框时重置。
   * @default false
   */
  reset?: boolean
  /**
   * 选择目录而不是文件。
   * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
   * @default false
   */
  directory?: boolean
}
export interface UseFileDialogReturn {
  files: Ref<FileList | null>
  open: (localOptions?: Partial<UseFileDialogOptions>) => void
  reset: () => void
  onChange: EventHookOn<FileList | null>
  onCancel: EventHookOn
}
/**
 * 轻松打开文件对话框。
 *
 * @see https://vueuse.org/useFileDialog
 * @param options
 */
export declare function useFileDialog(
  options?: UseFileDialogOptions,
): UseFileDialogReturn