useFilePicker —— 简单的 React 文件选择器 Hook

1. 项目介绍

useFilePicker 是一个简单的 React Hook，用于在网页中打开浏览器文件选择器。它提供了丰富的功能和自定义验证逻辑，可以轻松集成到任何 React 应用程序中，用于处理文件上传功能。

2. 项目快速启动

首先，您需要安装 useFilePicker：

npm i use-file-picker
# 或者
yarn add use-file-picker

以下是一个简单的使用例子：

import React from 'react';
import { useFilePicker } from 'use-file-picker';

export default function App() {
  const [openFilePicker, filesContent, loading] = useFilePicker({
    accept: 'text/plain',
  });

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <button onClick={() => openFilePicker()}>选择文件</button>
      <div>
        {filesContent.map((file, index) => (
          <div key={index}>
            <h2>{file.name}</h2>
            <div>{file.content}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

3. 应用案例和最佳实践

读取并显示文本文件内容

import React from 'react';
import { useFilePicker } from 'use-file-picker';

export default function TextFileReader() {
  const [openFilePicker, filesContent, loading] = useFilePicker({
    accept: 'text/plain',
    readAs: 'Text',
  });

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <button onClick={() => openFilePicker()}>选择文本文件</button>
      <div>
        {filesContent.map((file, index) => (
          <div key={index}>
            <h2>{file.name}</h2>
            <div>{file.content}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

读取并显示图片

import React from 'react';
import { useFilePicker } from 'use-file-picker';

export default function ImageReader() {
  const [openFilePicker, filesContent, loading, errors] = useFilePicker({
    accept: 'image/*',
    readAs: 'DataURL',
    multiple: true,
  });

  if (loading) {
    return <div>加载中...</div>;
  }

  if (errors.length) {
    return <div>发生错误</div>;
  }

  return (
    <div>
      <button onClick={() => openFilePicker()}>选择图片</button>
      <div>
        {filesContent.map((file, index) => (
          <div key={index}>
            <h2>{file.name}</h2>
            <img alt={file.name} src={file.content} />
          </div>
        ))}
      </div>
    </div>
  );
}

4. 典型生态项目

目前，useFilePicker 没有官方的典型生态项目列表。但是，由于其简单易用的特性，它已被广泛用于各种需要文件上传功能的 React 项目中。您可以查看其 GitHub 仓库以获取更多使用案例和社区贡献的代码片段。