Блог

Я пытаюсь включить опцию загрузки изображения в мое приложение (React на лицевой стороне и NodeJS на сервере). Проблема, с которой я сталкиваюсь, заключается в том, что я не могу отправить файл на сервер. Я видел другие вопросы на этом сайте и учебные пособия на других сайтах, но я не могу найти, что я делаю неправильно, поэтому я надеюсь, что вы можете, пожалуйста, помогите мне.

Это часть моего кода React:

 export default class DisplayPicture extends React.Component {
  constructor(props) {
    super(props);
    // etc
  }

  onImageChange = (event) => {
    if (event.target.files amp;amp; event.target.files[0]) {
      const img = event.target.files[0];
      const formData = new FormData();
      formData.append("image", img);

      this.service
        .uploadPicture(formData) // API call through a service
        .then((backAnswer) => console.log(backAnswer))
        .catch((err) => console.log(err));
    }
  };

  render() {
    return (
      <div>
        <p>Please, upload an image</p>
        <input type="file" name="image" onChange={this.onImageChange} />
      </div>
    );
  }
}
  

Однако, когда я смотрю на то, что служба отправляет на сервер, это пустой объект, и сервер, очевидно, получает то же самое в req.body и «неопределенный» при поиске req.file.

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

Заранее спасибо!!