Javascript react antd中如何打印上传的文件名

发布于08月15日

我对文件的react 和学习都是新手.我try 在上传文件时使用一个变量(代码中的‘filename’)来存储文件的名称，并将其打印在下面显示的代码的第一行中，但不起作用.我不确定我错在哪里.这是我编写的基本代码:

<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>

我想打印第一行上传的文件的名称.我这样做正确吗？如果正确，我如何在那里打印上传的文件名？

推荐答案

在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>