如何上传文件并在对话框窗口中显示它

Question

我使用 React 和 Ant Design 作为组件库。我想实现以下行为：

用户单击按钮，资源管理器窗口将打开以上传文件。当用户单击选择文件时，会出现一个弹出窗口，显示该文件。 我的问题是上传的文件显示在按钮旁边。我不知道如何防止它出现在那里，而是在弹出窗口中显示它。 我很难理解如何构建我的组件以及它们应该如何交互。

例如我的组件UploadFile：如何触发上传窗口而不是相应上传区域的按钮？

function UploadFile() {
  const onUpload = () => {
    console.log('asdf')
  }

  return (
    <Upload name="file" accept=".json" customRequest={onUpload}>
      <Button icon={<ImportIcon />} />
    </Upload>
  )
}

Answer 1

我终于找到答案了：

有一个字段叫

showUploadList

，你可以将其设置为false，这样就不会显示上传的文件了。

function UploadFile() {
  const [fileName, setFileName] = useState<string | null>()
  const [isModalVisible, setIsModalVisible] = useState(false)

  const onSelectFile = (file) => {
    setFileName(file.name)
    setIsModalVisible(true)
  }

  return (
    <>
      <Upload name="file" accept=".json" showUploadList={false} beforeUpload={onSelectFile}>
        <Button icon={<ImportIcon />} />
      </Upload>
      <Modal title="asdf" visible={isModalVisible} handleOk={undefined} handleCancel={undefined}>
        <p>{fileName ? `you selected ${fileName}` : 'no file selected'}</p>
      </Modal>
    </>
  )
}