如何在React中使用Uppy DropTarget插件？现有实现无法运行怎么办？

现有代码问题梳理 #

• 缺失核心依赖导入：代码中使用的Uppy核心类、Tus上传插件、DropTarget拖拽插件均未导入
• 目标DOM绑定时机错误：初始化Uppy时组件还未完成渲染，#dropzone元素尚未存在，导致插件无法绑定到对应节点
• 未配置拖拽状态反馈与上传事件回调，无法验证功能是否生效

正确配置步骤 #

1. 安装完整依赖 #

npm install @uppy/core @uppy/tus @uppy/drop-target @uppy/react
# 或yarn安装
yarn add @uppy/core @uppy/tus @uppy/drop-target @uppy/react

2. 完整实现代码 #

import React, { useRef, useEffect } from 'react'
import Uppy from '@uppy/core'
import Tus from '@uppy/tus'
import DropTarget from '@uppy/drop-target'
import { useUppy } from '@uppy/react'
// 导入Uppy基础样式，必须引入否则默认交互样式不生效
import '@uppy/core/dist/style.min.css'

const Dropzone: React.FC = () => {
  // 使用ref绑定拖拽区域，比id选择器更可靠，避免id重复冲突
  const dropZoneRef = useRef<HTMLDivElement>(null)

  const uppy = useUppy(() => {
    return new Uppy({
      debug: true, // 开发环境可开启debug查看运行日志，生产环境关闭
      autoProceed: true, // 选择文件后自动开始上传，不需要手动触发
    })
      .use(Tus, {
        endpoint: 'https://tusd.tusdemo.net/files/', // 替换为你的tus服务端点
        retryDelays: [0, 1000, 3000, 5000],
      })
      // 监听上传完成事件，验证功能是否生效
      .on('complete', (result) => {
        console.log('上传成功文件：', result.successful)
        console.log('上传失败文件：', result.failed)
      })
  })

  // 组件挂载完成、DOM生成后再绑定DropTarget插件
  useEffect(() => {
    if (dropZoneRef.current && !uppy.getPlugin('DropTarget')) {
      uppy.use(DropTarget, {
        target: dropZoneRef.current,
        // 配置拖拽状态回调，添加可视化反馈
        onDragOver: () => {
          dropZoneRef.current?.classList.add('dragover')
        },
        onDragLeave: () => {
          dropZoneRef.current?.classList.remove('dragover')
        },
        onDrop: () => {
          dropZoneRef.current?.classList.remove('dragover')
        }
      })
    }
    // 组件卸载时销毁插件，避免内存泄漏
    return () => {
      const dropTargetPlugin = uppy.getPlugin('DropTarget')
      if (dropTargetPlugin) uppy.removePlugin(dropTargetPlugin)
    }
  }, [uppy])

  return (
    <div
      ref={dropZoneRef}
      className="flex items-center justify-center w-96 h-48 border-2 border-dashed border-gray-300 rounded-lg transition-all"
    >
      <p className="text-gray-500">将文件拖拽到此处上传</p>
      <style>{`
        .dragover {
          border-color: #2563eb;
          background-color: #eff6ff;
        }
      `}</style>
    </div>
  )
}

export default Dropzone

3. 可选简化方案 #

如果不需要自定义复杂的拖拽区域逻辑，可以直接使用@uppy/react提供的<DragDrop />组件，不需要手动配置DropTarget插件：

import React from 'react'
import Uppy from '@uppy/core'
import Tus from '@uppy/tus'
import { DragDrop, useUppy } from '@uppy/react'
import '@uppy/core/dist/style.min.css'
import '@uppy/react/dist/style.min.css'

const Dropzone: React.FC = () => {
  const uppy = useUppy(() => {
    return new Uppy({ autoProceed: true })
      .use(Tus, { endpoint: '你的tus服务地址' })
  })

  return <DragDrop uppy={uppy} />
}

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