在 ReactJS 中使用 react-dropzone 模块

简介

react-dropzone 是一个 ReactJS 组件，用于拖放文件上传。它提供了一个简单的 API 来处理用户在应用程序中拖放文件的事件，而不需要连接到一个特定的后端。

安装

npm install react-dropzone

示例代码

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

function Dropzone({ onFileDrop }) {
  const onDrop = useCallback((acceptedFiles) => {
    onFileDrop(acceptedFiles);
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()} className="dropzone">
      <input {...getInputProps()} />
      <p>拖放文件到此处，或者点击选择文件进行上传</p>
    </div>
  );
}

export default Dropzone;

说明

使用 useDropzone hook 创建一个 Dropzone 组件。在这个组件中，我们需要处理 onDrop 事件，并通过 onFileDrop 函数将接受的文件传递出去。

我们使用 getRootProps 和 getInputProps 函数获取传递给 div 元素和 input 元素的属性。这是必需的，以便拖放文件上传正常工作。

引用

import { useDropzone } from 'react-dropzone';

API

useDropzone

useDropzone 是一个 React Hook，用于创建一个拖放区域。它通过以下属性进行配置：

onDrop: (acceptedFiles: File[]) => void

当用户拖放文件到拖放区域时要调用的函数。接受的文件数组将传递给这个函数。

function onFileDrop(acceptedFiles) {
  console.log(acceptedFiles);
}

const { getRootProps, getInputProps } = useDropzone({
  onDrop: onFileDrop,
});

accept: string | string[] | null

只接受特定类型的文件。支持 MIME 类型和文件扩展名。可以使用类似 '.pdf' 的字符串或数组。

const { getRootProps, getInputProps } = useDropzone({
  accept: '.pdf,.doc,.docx',
});

disabled: boolean

禁用拖放区域。

const { getRootProps, getInputProps } = useDropzone({
  disabled: true,
});

multiple: boolean

启用多文件上传。

const { getRootProps, getInputProps } = useDropzone({
  multiple: true,
});

maxSize: number

文件的最大大小，以字节为单位。

const { getRootProps, getInputProps } = useDropzone({
  maxSize: 5000000,
});

minSize: number

文件的最小大小，以字节为单位。

const { getRootProps, getInputProps } = useDropzone({
  minSize: 10000,
});

结论

使用 react-dropzone 在 ReactJS 中实现拖放文件上传非常简单。其简单易用的 API 使得开发者能够将其集成到他们的应用程序中，并获得更好的用户体验。