React应用中支持State/Redux的文档上传功能实现库推荐咨询

以下推荐的方案完全匹配你提到的三个核心特性，可直接在项目中落地：

首选库：react-dropzone #

这是 React 生态中最成熟的轻量上传工具库，无额外UI依赖，灵活度极高：

• 原生支持拖拽上传能力，可自定义拖拽区域样式、触发规则，支持自定义文件类型、大小、上传数量限制
• 天生适配 Multipart 格式上传，拿到选中/拖拽的文件对象后，直接封装进FormData即可向后端提交，不需要额外做格式转换
• 状态完全可控，没有内置强绑定的状态管理逻辑，上传进度、文件列表、错误信息等所有状态既可以存在组件内部useState，也可以直接通过dispatch同步到Redux store做全局管理

基础使用示例（适配Redux场景） #

import { useDropzone } from 'react-dropzone'
import { useDispatch } from 'react-redux'
// 引入你自己定义的Redux相关action
import { addUploadFile, updateUploadProgress, markUploadSuccess } from './store/uploadSlice'

function DocumentUploader() {
  const dispatch = useDispatch()
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    // 限制可上传的文档类型
    accept: {'application/*': ['.pdf', '.doc', '.docx', '.txt', '.xls', '.xlsx']},
    onDrop: acceptedFiles => {
      acceptedFiles.forEach(file => {
        // 先将文件信息存入Redux
        dispatch(addUploadFile({
          id: Math.random().toString(36).slice(2),
          name: file.name,
          size: file.size,
          status: 'uploading'
        }))
        // 构造Multipart格式请求体
        const formData = new FormData()
        formData.append('document', file)
        // 发起上传请求
        fetch('/api/document/upload', {
          method: 'POST',
          body: formData
        }).then(res => res.json())
        .then(data => {
          dispatch(markUploadSuccess(file.name))
        })
      })
    }
  })

  return (
    <div {...getRootProps({style: {padding: '2rem', border: '2px dashed #ccc', borderRadius: '4px'}})}>
      <input {...getInputProps()} />
      {
        isDragActive ? 
        <p>松开即可开始上传文档</p> :
        <p>拖拽文档到此处，或点击区域选择本地文档</p>
      }
    </div>
  )
}

备选方案：Ant Design Upload 组件 #

如果你的项目已经接入Ant Design组件库，直接使用内置的Upload组件即可，不需要额外安装依赖：

• 开启drag属性就可以直接使用拖拽上传能力，内置了拖拽状态、文件列表、上传进度等UI，不需要自己手写基础样式
• 默认就是Multipart格式提交，也支持自定义请求方法适配你的后端接口规则
• 支持完全受控模式，只需要将fileList属性绑定到你的state/Redux存储的文件列表，通过onChange事件同步状态即可

通用实现注意点：
不管你选择哪套方案，核心逻辑都是统一的：先通过拖拽/文件选择拿到File对象，再封装为FormData提交，所有上传相关状态都可以通过组件暴露的回调事件同步到你需要的状态管理容器中，不存在适配限制。

内容的提问来源于stack exchange，提问作者Rahulrk