将正文解析复选框表达为数组
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('/');
});
});
我对 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('/');
});
});