Блог

Главная - Вопросы по программированию - Я не могу ОПУБЛИКОВАТЬ объект FormData из загруженного пользователем файла с помощью Axios (React, Node.JS)

Я не могу ОПУБЛИКОВАТЬ объект FormData из загруженного пользователем файла с помощью Axios (React, Node.JS)

#javascript #node.js #reactjs #axios #form-data

Вопрос:

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

Мой HTML — код для формы выглядит следующим образом:

  <div className='LoafGalleryWrap'>
    <h1 className='banner'>Illustrious Loafs</h1>
    <form>
      <label>Add a loaf to the exhibit:
        <input type='file' onChange={props.fileSelectedHandler} />
        <button onClick={props.fileUploadHandler}>Upload</button>
      </label>
    </form>
    <button onClick={props.toggleDisplayLandingPage}>Back</button>
</div>

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

 fileUploadHandler(e) {
e.preventDefault();
e.stopPropagation();
let file = this.state.selectedFile;
let formData = new FormData();
formData.append('image', file);
formData.append('name', file.name);

const pic = formData.getAll('image');
console.log(formData)

axios({
  url: 'http://localhost:3001/uploadLoaf',
  method: 'POST',
  data: formData,
  headers: { "Content-Type": "multipart/form-data" }
})
.then(respo => console.log(respo))

}

На моем сервере, когда я проверяю тело запроса, там ничего нет. Я выхожу из системы и просто получаю пустой объект. Я пробовал использовать промежуточные программы multer и connect-multipart, но ни одно из них не удалось отобразить данные формы. То, что я делаю, похоже на то, что предлагается в этой статье (https://www.geeksforgeeks.org/file-uploading-in-react-js/), но я не знаю, как получить данные, отправленные в моих формах. Любое руководство очень ценится.

Мой серверный маршрут выглядит следующим образом:

 app.post('/uploadLoaf', (req, res) => {


console.log('uploadLoaf endpoint reached');
  console.log(req.body);
  res.status(201).json('complete')
  // axios.post('https://us-central1-sour-loafs.cloudfunctions.net/uploadFile/', 'upload_file', formData, {
  //     headers: {
  //       'Content-Type': 'multipart/form-data'
  //     }
  // })
  //   .then(result => {
  //     console.log(result);
  //     res.send(result);
  //   })
  //   .catch(err => {
  //     console.log(err);
  //     res.send(err)
  //   })
});

Ответ №1:

попробуйте заменить имеющуюся у вас функцию axios на эту

 axios.post("http://localhost:3001/uploadLoaf", formData, { })
      .then(res => { // then print response status
        console.log(res.statusText)
      })

дайте мне знать, что вы используете в бэкэнде и каков результат работы функции res

Комментарии:

1. Я обновил вопрос, чтобы также показать маршрут моего сервера, я использую Node и Express. В журнале просто отображается произвольный ответ-моя проблема в том, что я не могу получить данные формы при входе в систему req.body()

Ответ №2:

Мне удалось получить доступ к данным файла FormData с помощью функции загрузки Multer. Мой импорт и маршрут сервера, настроенный таким образом, чтобы я мог получить доступ к данным файла, выглядит следующим образом:

     const multer = require("multer");
    const upload = multer({
      limits:{fileSize: 1000000},
      }).single("image");

app.post('/uploadLoaf', (req, res) => {
      upload(req, res, (err) => {
        if (err) {
          res.sendStatus(500);
        }
        console.log(req.file);
        res.send(req.file);
      });
    });

Теперь я не уверен, как отправить данные этого файла в API так, как ожидает API, получив сообщение об ошибке: «Ошибка: не удалось обработать запросn». Но, по крайней мере, теперь я могу видеть данные из формы.

Метки: ,