0

На странице существует форма отправки изображений, события в которой обрабатывает скрипт fetch_upload.js

  const form = document.getElementById('upload');
  const button = document.getElementById('img-upload');
 
  button.addEventListener('click', fetchReq, false);
 
  function fetchReq() {
    fetch('/form', {
      method: 'POST',
      data: new FormData(form)
    })
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      console.log(data);
    })
    .catch(err => console.log(err));
  }
  <form id="upload" action="/form" method="post" enctype="multipart/form-data">
      <label for="img">Загрузите фотографию</label><br>
      <input type="file" name="img" id="img">
      <button id="img-upload">Отправить</button><br>
  </form>
 
  <script src="js/fetch_upload.js"></script>

Запрос на стороне сервера обрабатывается вот так

   app.post('/form', (req, res) => {
       new formidable.IncomingForm().parse(req)
           .on('fileBegin', (name, file) => {
               file.path = __dirname + '/public/' + file.name;
           })
           .on('file', (name, file) => {
            
           });
       res.status('200').json({
           name: "Fileл",
           description: "some text information"
       });
   });

В результате чего ответ сервера должен благополучно выводиться в консоль, теоретически не заставляя страницу перезагружаться. И в общем всё отрабатывает правильно, но затем вместо страницы браузер отображает входящий json. Как сделать так, чтобы этого не происходило и в дальнейшем данные из json'a поместить на эту же страницу?

Предвосхищая ответы с использованием event.defaultPrevenred() в функции обработчика: если поместить данный код в функцию fetchReq то обработка ответа сервера произойдет правильно, но файл на сервер передан не будет. Тоже самое произойдёт если назначить тегу button атрибут type="button"

1 ответ 1

0

Как выяснилось сервер всё отрабатывал правильно. Проблема заключалась в нескольких моментах:

1.Тег form необходимо использовать без специальных атрибутов, но указать, что button относиться именно к этой форме

<form id="upload">
     <label for="img">Загрузите фотографию</label><br>
     <input type="file" name="img" id="img">
     <button form="upload" id="img-upload">Отправить</button><br>
 </form>

2.Слегка подправить работу с экземпляром new FormData()

document.querySelector('#img-upload')
  .addEventListener('click', upload, false);

function upload() {

  let input = document.querySelector('#img');
  let uploadData = new FormData();
  uploadData.append(input.files[0].name, input.files[0]);

  fetch('/form', {
    method: 'POST',
    body: uploadData 
  }).then(
    response => response.json()
  ).then(
    success => console.log(success)
  ).catch(
    error => console.log(error)
  );
}

Надеюсь этот пример кому-то поможет. Решение нашлось благодаря примеру с этого ресурса.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.