useFileDialog

轻松选取文件

Usage

实时编辑器

function Demo() {
  const [files, open, reset] = useFileDialog();

  return (
    <div>
      <button onClick={() => open()}>选择文件</button>
      <button
        style={{ marginLeft: 20 }}
        disabled={!files}
        onClick={() => {
          reset();
        }}
      >
        重置
      </button>
      {files && (
        <div>
          <p>
            您已选择: <b>{files.length} 个文件</b>
            {Array.from(files).map((file) => {
              return <li key={file.name}>{file.name}</li>;
            })}
          </p>
        </div>
      )}
    </div>
  );
};

结果

API

useFileDialog

Returns

readonly [FileList | null, (localOptions?: Partial<UseFileDialogOptions> | undefined) => Promise<FileList | null | undefined>, () => void]: 包含以下元素的元组：

• 文件数组。
• 打开文件选择器函数。
• 重置函数。

Arguments

参数名	描述	类型	默认值
options	-	UseFileDialogOptions | undefined	-

UseFileDialogOptions

参数名	描述	类型	默认值
multiple	选择多个文件	boolean	true
accept	可以接受的文件类型	string	'*'
capture	指定设备，可以从麦克风或者摄像头中获取文件	string	-