javascript - react antd中如何打印上传的文件名？

Question

我是新来的 react 和学习文件。我尝试使用变量(代码中的“文件名”)在文件上传时存储文件名，并在下面显示的代码的第一行中打印它，但这没有用。我不确定我哪里出错了。这是我写的基本代码:

<Row> File name: {filename} </Row>
<Row>
  <Form.item name="fileupload"> 
    <Upload name="file" maxCount={1} showUploadList={false} accept=".png" beforeUpload={()=>false}>
      <Button type='primary'> Upload </Button>
    </Upload> 
  </Form>
</Row>

我想在第一行打印上传的文件名。我做得对吗？如果正确，我该如何打印上传的文件名？

Answer 1

在 onChange 处理程序中，您将获得上传文件的信息。

handleFileUpload 函数:

const handleFileUpload = (info) => {
  console.log(`File name: ${info.file.name}`)
  // Logic of action you want to perform on file upload
}

添加onChange:

<Row> File name: {filename} </Row>
<Row>
  <Form.item name="fileupload"> 
    <Upload name="file" maxCount={1} showUploadList={false} accept=".png" beforeUpload={()=>false} onChange={handleFileUpload} >
      <Button type='primary'> Upload </Button>
    </Upload> 
  </Form>
</Row>