Почему FormData уходит как undefined?

Question

[whireless]

Всем привет! Не пойму, почему с сервера приходит undefined?

Вот отправляю форму:

const payForm = document.querySelector('.pay__form');

payForm.addEventListener('submit', (evt) => {
  evt.preventDefault();

  sendData();
});

const sendData = async () => {
  try {
    const response = await fetch(
      'https://example.com:8443/server',
      {
        method: 'PUT',
        body: new FormData(payForm),
      }
    );
    const data = await response.text();
    console.log(data);
  } catch (error) {
    console.log(error);
  } 
};

Вот обрабатываю и отвечаю:

let mail = '';

app.use(bodyParser.urlencoded({ extended: false }));
app.put('/server',(req, res) => {
  req.on('data', chunk => {
    mail += req.body.email; // Тут должна быть строка из <input name="email">
  })
  req.on('end', () => {
    res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'})
    res.end(mail); // Тут сервер отвечает строкой из input
  })
})

По идее в консоль должна падать строка, введённая человеком, а в итоге падает undefined

Comments

[Lynn «Кофеман»]

Потому что по умолчанию formdata отправляется не как urlencoded

[whireless]

Lynn «Кофеман», пробовал и -
app.use(bodyParser.json())
Не помогло тоже

[Lynn «Кофеман»]

whireless, ну так это и не json

[whireless]

Lynn «Кофеман», подскажите, а как его тогда распарсить? В описании к body-parser не нашел

Answer 1

[Lynn «Кофеман»]

Если в вашей форме нет файлов, то проще посылать application/x-www-form-urlencoded

const response = await fetch(
  'https://example.com:8443/server',
  {
    method: 'PUT',
    body: new URLSearchParams(new FormData(payForm)),
  }
);

И req.on('data', ...) не нужен.

app.use(bodyParser.urlencoded({ extended: false }));
app.put('/server',(req, res) => {
  const mail = req.body.email;
  res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'})
  res.end(mail);
})

Если же очень хочется multipart/form-data, то на сервере нужен multer, т.к. встроенный в Express body-parser не умеет обрабатывать такие запросы.

Comments

[whireless]

Только текстовые поля и всё. Сделал как вы подсказали, тоже не помогло, раньше undefined падало в консоль, сейчас просто ничего не падает.

const sendData = async () => {
  try {
    const response = await fetch(
      'https://example.com:8443/server',
      {
        method: 'PUT',
        headers: { //Заголовки пробовал и удалять и добавлять, без толку
          'Content-Type': 'application/x-www-form-urlencoded',  
        },
        body: new URLSearchParams(new FormData(payForm)),
      }
    );
    const data = await response.text();
    console.log(data);
  }

const bodyParser = require('body-parser');

app.disable('x-powered-by');
app.use(bodyParser.urlencoded({ extended: false }));

let mail = '';
app
.route('/server')
.put((req, res) => {
  req.on('data', chunk => {
    mail += req.body.email;
  })
  req.on('end', () => {
    res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'})
    res.end(mail);
  })
})

[Lynn «Кофеман»]

whireless, потому что req.on не нужен. Тело запроса уже получено и распаршено в bodyParser-е.

см. обновление ответа

[whireless]

Lynn «Кофеман», помог обновленный вариант, спасибо большое))

Answer 2

[Алексей Ярков]

Content-Type укажите при отправке multipart/form-data

Comments

[whireless]

Не помогло(

[Алексей Ярков]

whireless, а что уходит вообще?

[whireless]

Алексей Ярков,

[Алексей Ярков]

whireless, это в консоли. А в Network payload что?