尝试在 React 组件中以我的表单上传 PDF 文件，但在我使用 setFormData 时获取 {}

Question

我正在尝试创建一个表单以响应文件上传功能。我写了一个handleFileUpload函数，当用户选择需要上传的文件时触发。当我使用 e.target.files[0] 时，文件正确地记录在控制台中，但是当我尝试将文件设置为状态或 formData 在我的情况下，文件的值在formData 始终为 {}。任何形式的帮助将不胜感激。

我试过使用表单 encType='multipart/form-data' 但无济于事。我什至尝试使用 useState 将文件存储在单独的状态中，但是当我尝试使用 setState 和 e.target.files[0].

时再次得到空括号

这是我的组件的代码，我在其中获取需要使用表单中的输入标签上传的用户文件。

const AddNewContract = ({createNewContract}) => {
    const [formData, setFormData] = useState({
        file: null
      });

      const {
        file
    } = formData

    const handleFileUpload = e => {
      e.preventDefault();
      const temp_file = e.target.files[0];
      console.log(temp_file);

      setFormData({ ...formData, file: temp_file });
    }


    return (
        <Fragment>
            <Container >
            <form className='form' onSubmit={args => onSubmit(args)} >
            <p className='lead'>
             <i className='fas fa-user' /> Enter the new contract details.
            </p>

        <div className='form-group'>
        <label htmlFor="clientName">Upload contract PDF </label>
          <input type='file' name='file' onChange={args => handleFileUpload(args)} />
        </div>

        <input type='submit' className='btn btn-primary my-1' value='Add Contract' />
      </form>
      </Container>
      <div>
        {JSON.stringify(formData)}
      </div>
        </Fragment>


    )
}

AddNewContract.propTypes = {
    createNewContract: PropTypes.func.isRequired
}

export default connect(null, {createNewContract})(withRouter(AddNewContract));

我希望 formData 状态将文件作为文件的值，但我得到 {"file":{}}。 console.log(temp_file) 命令给我：

File {name: "Resume.pdf", lastModified: 1571412334151, lastModifiedDate: Fri Oct 18 2019 11:25:34 GMT-0400 (Eastern Daylight Time), webkitRelativePath: "", size: 128128, …}

这是整个文件的内容，正是我想在我的状态或 formData 中存储的内容，但由于某种原因它不起作用。请帮我找出这里的问题。

Answer 1

所以这里发生的事情是当你打印你得到的 formData {file:{}} 即使您选择了一个文件也是空的，因为该文件不是 JSON 对象，因此执行 JSON.Stringify() 将不会打印文件的密钥。

相反，我建议如果您想打印 formData 的内容，请使用此函数。

const getFormDataContent = (formData = {}) => {
    const { file } = formData;
    let keys = Object.keys(formData);
    keys = keys.filter(key => key !== "file");
    const data = {
      lastModified: file.lastModified,
      lastModifiedDate: file.lastModifiedDate,
      name: file.name,
      size: file.size,
      type: file.type
    };
    const fileData = { file: data };
    keys.forEach(key => {
      fileData[key] = formData[key];
    });
    return fileData;
  };

然后像这样JSON.Stringify打印它

<div>{JSON.stringify(getFormDataContent(formData))}</div>

Answer 2

const [formData, setFormData] = useState([]);

...

setFormData([e.target.files[0]]);

尝试在 React 组件中以我的表单上传 PDF 文件，但在我使用 setFormData 时获取 {}

Trying to upload a PDF file in my form in React component but getting {} when I use setFormData

javascript

reactjs

forms

file-upload

react-state