Как получить данные post-формы в Express.js: решение

Быстрый ответ

Для обработки данных формы можно использовать промежуточное ПО express.urlencoded() в Express вот таким образом:

const express = require('express');
const app = express();

app.use(express.urlencoded({ extended: true }));

app.post('/submit-form', (req, res) => {
  res.send(`Значение поля формы: ${req.body.yourFieldName}`);
});

app.listen(3000);

Не забудьте заменить yourFieldName на наименование вашего поля ввода формы. После такой настройки сервер будет способен извлекать значения формы, отправленные на endpoint /submit-form, непосредственно из объекта req.body.

Расшифровка типов кодирования формы

Существуют разные типы кодировок для отправки данных форм, среди которых чаще всего используются application/x-www-form-urlencoded и multipart/form-data. Представьте это как различные способы упаковки подарка: на выбор — бумага или коробка.

• Для обработки текстовых данных форм, закодированных в формате URL (urlencoded), подойдет промежуточное ПО, описанное выше.
• Если форма содержит файлы (multipart/form-data), для их обработки потребуются дополнительные модули, такие как multiparty или busboy.

Не забудьте про охрану безопасности

Безопасность не должна быть ущемленной при работе с данными от пользователей:

• Для приема данных в JSON используйте express.json().
• Расширенный анализ ({ extended: true }) применяйте, если в форме предполагаются массивы или вложенные объекты.
• Избегайте устаревших подходов, таких как req.param(), предпочитая обращение к req.body.fieldName.
• При приеме файлов используйте проверенные библиотеки, отказываясь от устаревшего express.multipart().

Создаем пользовательский парсер!

Для особых случаев, которые требуют специальной обработки данных или нестандартных типов содержимого, можно написать собственный парсер:

app.post('/submit-form', (req, res) => {
  let data = '';
  req.on('data', chunk => {
    data += chunk;
  });
  req.on('end', () => {
    // Ваша магия начинается здесь
  });
});

Придерживайтесь порядка в промежуточном ПО

Промежуточное ПО должно быть расположено до маршрутов в коде, как носки нужно надевать до обуви:

app.use(express.urlencoded({ extended: true }));

app.post('/submit-form', (req, res) => { /* достижение 'req.body' гарантировано */ });

Визуализация

Представьте, что у вас есть почтовый ящик 📬, а письма 📩 в нем — это данные формы POST. Для извлечения информации используйте body-parser, как ключник:

app.post('/submit-form', (req, res) => {
    const { field1, field2 } = req.body; // Ключник открывает замок
});

Итак, процесс раскодирования выглядит следующим образом:

До: [📬🔒(field1, field2)]
После: [📩🔓{ field1: 'value1', field2: 'value2' }]

Если представить это в визуализации:

📬 ➡️ 🗝️(body-parser) ➡️ 📩 ➡️ 🔓(req.body) ➡️ 🎉(Доступ открыт)

Открывая почтовый ящик, мы раскрываем содержимое письма, что в целом напоминает процесс, когда body-parser декодирует форму, а req.body предоставляет доступ к данным.

Распространенные проблемы и их решения

Проблемы нередко встречаются на каждом этапе работы, вот некоторые из них и способы их решения:

• Если данные формы не обрабатываются, проверьте порядок промежуточного ПО — оно должно быть расположено до маршрутов.
• Вложенные объекты искажены? Используйте { extended: true } вместе с express.urlencoded().
• Загрузка файлов не работает? Вам потребуется парсер для multipart/form-data.

Анализ в зависимости от типа содержимого

Если требуется обработка различных типов содержимого, вы можете сделать следующим образом:

app.post('/submit-form', (req, res, next) => {
  if (req.is('json')) {
    app.use(express.json());
  } else if (req.is('urlencoded')) {
    app.use(express.urlencoded({ extended: true }));
  }
  next();
});

Полезные материалы

1. Официальная документация API Express — подробная информация о req.body.
2. Обработка форм в Express на сайте MDN — руководство от сети разработчиков Mozilla.
3. Обработка форм в Express от Flavio Copes — пояснение работы POST-запросов в Express.
4. Получение POST-данных в Express на Stack Abuse — инструкция по работе с POST-данными.
5. Использование async/await в Express от Zell Liew — о преимуществах async/await при обработке маршрутов в Express.