react-dropzone

`react-dropzone` 是一个 React 库，它提供了一个可定制的拖放区域，用于接受文件的拖放和选择文件的方式。它是一个轻量级的库，易于使用和集成，并支持多个文件上传和文件类型限制。

使用 `react-dropzone`，你可以创建一个文件上传组件，允许用户将文件拖放到指定区域或单击区域选择文件。以下是一个简单的示例：

import React, { useState } from 'react';
import Dropzone from 'react-dropzone';

const FileUpload = () => {
  const [file, setFile] = useState(null);

  const onDrop = (acceptedFiles) => {
    setFile(acceptedFiles[0]);
  };

  return (
    <div>
      <Dropzone onDrop={onDrop}>
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drag and drop a file here, or click to select a file</p>
            {file && <p>{file.name}</p>}
          </div>
        )}
      </Dropzone>
    </div>
  );
};

export default FileUpload;

在这个例子中，我们创建了一个 `FileUpload` 组件，它使用 `Dropzone` 组件作为文件上传区域。我们将 `onDrop` 回调传递给 `Dropzone`，以便在用户选择文件后处理它。当用户选择文件时，`onDrop` 回调将设置 `file` 状态，并在页面上显示文件名。

`Dropzone` 组件还提供了一个 `accept` 属性，它可以接受一个文件类型数组，用于限制可以上传的文件类型。例如，如果你只想允许上传图像文件，可以将 `accept` 属性设置为 `['image/*']`。

总的来说，`react-dropzone` 是一个非常实用的库，可以帮助你快速创建并定制文件上传组件。