Реагировать: невозможно передать файл в бэкэнд узла по реакции

Question

Я пытаюсь отправить изображение на сервер через поле формы в React. Сначала я присваиваю состояние пусто, как это в моем классе конструктора

this.state = {
  image: "",
}

Затем я делаю функцию handleChange для графических и обычных текстовых полей.

handleChange(event) {
  const state = this.state;
  switch (event.target.name) {
    case 'image':
      state.image = event.target.files[0];
      break;
    default:
      state[event.target.name] = event.target.value;
  }
  this.setState(state);
}

В функции handleSubmit я вызываю функцию FormData и добавляю к ней изображение следующим образом

handleSubmit(event) {
  event.preventDefault();
  const { syllabus,image } = this.state;
  let formData = new FormData();
  formData.append('image', image);
  axios.post('api', { syllabus, formData })
   .then((response) => {
    console.log(response);
   });
 }

Наконец, это мое поле формы

<span className="btn btn-default btn-file file-choose">
  <input type="file" name="image" placeholder="Enter Image" onChange={this.handleChange} />
             </span>

Когда я отправляю эту форму и проверяю вкладку "Сеть" в консоли Chrome, formData кажется пустым, то есть изображение не передается. Когда я вызываю серверный маршрут с выбранным файлом, файл загружается, но я не могу добиться этого из интерфейса React, и изображение никогда не передается. Куда я иду не так?

Answer 1

Я решил это сам. Сначала я назначил состояние по умолчанию this.state={image: new File([''], ''),}

Это его функция-обработчик

handleIChange() { const inputFile = $("input#input-image")[0].files[0]; this.setState({ image: inputFile }); }

Вот как это представляется

handleSubmit(event) {
  event.preventDefault();
  const image = this.state.image;
  let formData = new FormData();
  formData.append("image", $("input#input-image")[0].files[0]);
  //console.log("image3", $("input#input-image")[0].files[0])
  //console.log("Data", formData)
  const config = {
    headers: {
      'Content-Type': 'multipart/form-data;boundary=${data._boundary}'
    }
  };
  axios.post('api', formData, config)
    .then((response) => {
      console.log(response);
      let id = response.data._id;
      this.props.history.push('route);
    });
}

Answer 2

Вам нужно отправить заголовок для типа контента

const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }

    return axios.post('api', { syllabus, formData }, config)

Answer 3

В вашем HTML вы должны иметь

<form enctype="multipart/form-data">
   ...rest of your code
</form>

И если вы хотите проверить данные, попробуйте войти с помощью

for (let obj of formData.entries()) {
   console.log(`${obj[0]} => ${obj[1]}`); 
}