Выразить флажки парсинга тела в массив

Question

Я довольно новичок в нод / экспресс и пытаюсь создать простую форму, которая может публиковать данные в базе данных Mongo.

Я изо всех сил пытаюсь добавить пару флажков и сохранить значения в массиве. Например

Моя форма выглядит следующим образом.

<form action="/addProduct" method="POST" encType="multipart/form-data">
  <div>
    <label for="product-name">Name:</label>
    <input type="text" id="product-name" name="product_name">
  </div>

  <div>
    <label for="product-price">Price:</label>
    <input type="text" id="product-price" name="product_price">
  </div>

  <div>
    <label for="description">Description:</label>
    <textarea id="description" name="description"></textarea>
  </div>

    <input type="checkbox" name="categories" value="bedroom">Bedroom<br>
    <input type="checkbox" name="categories" value="kitchen">Kitchen<br>

  <input type="file" name="sampleFile" />

  <div class="button">
      <button type="submit">Submit</button>
  </div>
</form>

и server.js выглядит так

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var MongoClient = require('mongodb').MongoClient;
var db;

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

MongoClient.connect('xxxxxxxxxxxxxx', function (err, database) {
  if (err) return console.log(err);
  db = database;
  app.listen(3000, function () {
    console.log('listening on 3000');
  });
});

app.post('/addProduct', function (req, res) {
  db.collection('products').save(req.body, function (err, result) {
    if (err) return console.log(err);
    console.log('saved to database');
    res.redirect('/');
  });
});

Я не могу понять, как включить массив категорий в объект req.body. Я хотел бы показать как

{ 
  product_name: 'light',                                                                                                                                                                                 
  product_price: '100',                                                                                                                                                                           
  description: 'its a light',                                                                                                                                                                            
  categories: [
      'bedroom',
      'kitchen'
   ] 
}    

вместо этого это проходит как

{ 
  product_name: 'light',                                                                                                                                                                                 
  product_price: '100',                                                                                                                                                                           
  description: 'its a light',                                                                                                                                                                            
  categories:'kitchen'

}   

Заранее спасибо.

Answer 1

Ваша проблема в том, что вы используете bodyParser на multipart/form-data форма. Документы bodyParser говорят: "Это не относится к составным телам из-за их сложной и типично большой природы".

Если вы удалите multipart/form-data из вашей формы и не пытайтесь загрузить файл, вы увидите, что bodyParser может предоставить вам нужный формат, но тогда вы не сможете загрузить файл.

Таким образом, вы должны использовать альтернативу bodyParser, который обрабатывает multipart/form-data, Одной из альтернатив является multer. Вам просто нужно сделать две модификации вашего кода, чтобы использовать multer:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var MongoClient = require('mongodb').MongoClient;
var db;

// 1. require multer and define where you want the file to be uploaded
var multer  = require('multer');
var upload = multer({ dest: 'uploads/' });

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

MongoClient.connect('xxxxxxxxxxxxxx', function (err, database) {
  if (err) return console.log(err);
  db = database;
  app.listen(3000, function () {
    console.log('listening on 3000');
  });
});

// 2. Add middleware here with the name of the file input
app.post('/addProduct', upload.single('sampleFile'), function (req, res) {
  db.collection('products').save(req.body, function (err, result) {
    if (err) return console.log(err);
    console.log('saved to database');
    res.redirect('/');
  });
});

Answer 2

Парсер body-parser использует, qs, должен преобразовывать параметры с несколькими значениями в массив, но если предоставляется только одно значение (т.е. вы устанавливаете только один флажок), qs просто возвращает строку. Вы можете заставить его всегда возвращать массив, включая [] после имени параметра.

Итак, попробуйте изменить все name="categories" в вашей форме, чтобы name="categories[]",

---

Вот пример, который показывает, как qs разбирает данные формы:

const qs = require('qs')

// qs just returns a as a string.
console.log(qs.parse('a=1'))

// The [] make qs always return an array.
console.log(qs.parse('a[]=1'))
console.log(qs.parse('a[]=1&a[]=2'))

https://runkit.com/5818badec3b80300148b2c65/5818bbf9c3b80300148b2d24