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)
  );
}

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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