Пытаюсь загрузить файл PDF в моей форме в компонент React, но получаю {}, когда я использую setFormData - PullRequest
Новая
       73

Пытаюсь загрузить файл PDF в моей форме в компонент React, но получаю {}, когда я использую setFormData

0 голосов
/ 29 октября 2019

Я пытаюсь создать форму, реагирующую на функциональность загрузки файла. Я написал функцию 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) дает мне:

Файл {имя: "Resume.pdf", lastModified: 1571412334151, lastModifiedDate: Пт 18 октября 2019 11:25:34 GMT-0400 (восточное дневное время), webkitRelativePath: "", размер: 128128,…}

, который представляет собой все содержимое файла и именно то, что я хочу сохранить в своем состоянии или formData , но это не такработать по какой-то причине. Пожалуйста, помогите мне найти проблему здесь.

Ответы [ 2 ]

1 голос
/ 31 октября 2019

То, что здесь происходит, заключается в том, что когда вы печатаете 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>

0 голосов
/ 31 октября 2019 
const [formData, setFormData] = useState([]);

...

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