将正文解析复选框表达为数组

Express body-parsing checkboxes to array

我对 node / express 还很陌生,我正在尝试创建一个可以 post 数据到 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'

}   

提前谢谢你。

解析器 body-parser 使用 qs,应该将具有多个值的参数转换为数组,但如果只提供一个值(即您只选中一个复选框),qs 只是 return 一个字符串。您可以通过在参数名称后包含 [] 来强制它始终 return 数组。

因此,尝试将表单中的所有 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

您的问题是您在 multipart/form-data 表单上使用 bodyParser。 bodyParser 文档说 "This does not handle multipart bodies, due to their complex and typically large nature."

如果您从表单中删除 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('/');
  });
});