Question

我对node / express非常陌生，并尝试创建一个可以将数据发布到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

解析器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

Answer 2

您的问题是您在multipart/form-data表单上使用bodyParser。 bodyParser文档说“由于它们复杂且通常较大，因此不能处理多部分主体。”

如果您从表单中删除multipart/form-data并且不尝试上传文件，您会看到bodyParser能够为您提供所需的格式 - 但之后您将无法上传文件。

所以你必须使用处理multipart/form-data的bodyParser的替代方法。一种替代方案是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('/');
  });
});

对数组执行正文解析复选框

2 个答案: