如何阻止 React Ant Design Upload 组件自动发布文件

Posted 2023-02-18

【中文标题】如何阻止 React Ant Design Upload 组件自动发布文件

【英文标题】：How to stop React Ant Design Upload component from posting files automatically

【发布时间】：2022-01-22 17:45:49

【问题描述】：

我有这个从 antd ant design documentation 得到的简单文件上传按钮：

<Upload>
  <Button
    icon=<UploadOutlined />
    className="upload-btn"
  >
     Upload a file
  </Button>
</Upload>

每次我上传文件时，我都会在控制台日志中收到此错误：

我不希望它在我上传文件时发出发布请求，我有一个提交按钮。

【参考方案1】：

您可以通过从 beforeUpload 属性返回 false 来做到这一点，如下所示：

<Upload beforeUpload=()=> 
    /* update state here */
    return false; >
    <Button icon=<UploadOutlined />>Select File</Button>
</Upload>

显然，以这种方式，您必须定义一个状态，并将文件存储在该状态中以手动将其发送到服务器。 Here 是实现此逻辑的示例。

【讨论】：

非常感谢，它运行良好。是的，我定义了状态和提交函数等等，这只是一个提取的代码。

不客气。