只需在非上传区域加下面两个事件,阻止默认行为

onDragOver={(e: any) => e.preventDefault()}//阻止浏览器默认拖拽下载事件
 onDrop={(e: any) => e.preventDefault()}>

例如,我的拖拽上传区域在Modal内部,在modal外部加一个div 并指定上述事件:

<div
  onDragOver={(e: any) => e.preventDefault()}//阻止浏览器默认拖拽下载事件
  onDrop={(e: any) => e.preventDefault()}>
      <Modal
        visible={visible}
        title={""}
        onCancel={() => setVisible(false)}
        okText={"确定"}
        cancelText={"取消"}
        onOk={() => {}}
      >
          <Dragger {...uploadProps}/>
      </Modal>
 </div>

效果:

拖拽到dragger内部:正常上传
推拽到其他位置:无事发生

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐