checkbox数组返回nodejs中最后一个选中的值，而不是整个数组

Question

我正在尝试通过req.body复选框中的复选值。如果我只检查一个，就没有问题，并且在req.body上有一个值为的对象。如果我检查了多个，那么它会返回我检查的一行中的最后一个。我使用express-ejs和express.json((作为主体解析器。

这是我的应用程序文件中的一部分，我在其中配置express.json((

const express = require("express");
const path = require("path");
const rateLimit = require("express-rate-limit");
const helmet = require("helmet");
const mongoSanitize = require("express-mongo-sanitize");
const xss = require("xss-clean");
const hpp = require("hpp");
const cookieParser = require("cookie-parser");
const throwsAnError = require("./utils/throwsAnError");
const checkAuth = require('./middleware/check-auth');
const app = express();
if(process.env.NODE_ENV !== "test"){
const limiter = rateLimit({
max: 100,
windowMs: 60 * 60 * 1000,
message: "Too many request, please try again in an hour"
});

app.use("/api", limiter);
}
app.set("view engine", "ejs")
app.set("views", path.join(__dirname, "views"))
app.use(express.static(path.join(__dirname, "public")));
app.use(cookieParser());
app.use(helmet());
// For security reasons we accept body up to 10kb
app.use(express.json({ limit: '10kb' }));
app.use(express.urlencoded({ extended: false }));
// Data sanitization (Cleaning the income data from malicious code)
// NoSQL data injection
app.use(mongoSanitize());
// Data sanitization against XSS
app.use(xss());
//Preventing HTTP parameter poloution
app.use(hpp());

路由器是这样的：

router.get("/offers/masoutis-offers", authController.isLoggedIn, viewController.masoutisOffers);
router.post("/offers/masoutis-offers", authController.isLoggedIn, viewController.masoutisOffers);

控制器是这样的：

exports.masoutisOffers = async function(req, res) {
console.log(req.body);
const products = await getOffers(req);
res.status(200).render("displayProducts", {
title: "Επιλεγμένες Προσφορές",
products
});
}
async function getOffers(req) {
const page = parseInt(req.query.page || 1); 
const sort = req.query.sort || "discountPrice";
const itemsPerPage = 10;
const totalProducts = await Offers.countDocuments();
const products = await Offers.find()
.skip((page - 1) * itemsPerPage)
.limit(itemsPerPage) 
.sort(sort);
return {
products,
sort,
currentPage: page,
hasNextPage: itemsPerPage * page < totalProducts,
hasPreviousPage: page > 1,
nextPage: page + 1,
previousPage: page - 1,
lastPage: Math.ceil(totalProducts / itemsPerPage)
}
}

我使用的测试表格是：

<form action="" method="post">
<input type="checkbox" id="hobby" name="stuhobbies" value="sing"/> &nbsp;&nbsp;<strong>Sing</strong>&nbsp;&nbsp;
<input type="checkbox" id="hobby" name="stuhobbies" value="guitarplay"/>&nbsp;&nbsp;<strong>GuitarPlay</strong>&nbsp;&nbsp;
<input type="checkbox" id="hobby" name="stuhobbies" value="cricket"/>&nbsp;&nbsp;<strong>Cricket</strong>&nbsp;&nbsp;
<input type="checkbox" id="hobby" name="stuhobbies" value="football"/>&nbsp;&nbsp;<strong>Football</strong>&nbsp;&nbsp;
<button type="submit">submit</button>
</form>

例如，如果我检查所有值，作为console.log(req.body(的返回，我将收到｛stu爱好："football"｝而不是所有值的数组

Answer 1

使用express的扩展URL编码正文解析，如以下

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

或者，在express的旧版本中，通过像这样的主体解析器包

const bodyParser = require('body-parser')
...
app.use(bodyParser.urlencoded({ extended: true}))

然后你可以把这类东西放在你的复选框html中。

<form action="" method="post">
<input type="checkbox" id="checkboxsing"    name="voice[]" value="sing"/> Sing
<input type="checkbox" id="checkboxshout"   name="voice[]" value="shout"/> Shout
<input type="checkbox" id="checkboxwhisper" name="voice[]" value="whisper"/> Whisper
<input type="checkbox" id="checkboxmumble"  name="voice[]" value="mumble"/> Mumble
<button type="submit">submit</button>
</form>

您将在.post()处理程序的req.body对象中看到这一点。

{
"voice": [
"sing",
"shout"
],
}

请注意，在我的示例中，每个复选框上的id属性是不同的。使用相同的id创建两个DOM对象(<div>、<input>等(是无效的HTML。浏览器没有抱怨，但它阻止你这样做来标记你的复选框。

<form action="" method="post">
<input type="checkbox" id="checkboxsing"    name="voice[]" value="sing"/>
<label for="checkboxsing">Sing</label>
<input type="checkbox" id="checkboxshout"   name="voice[]" value="shout"/>    
<label for="checkboxshout">Shout</label>
<input type="checkbox" id="checkboxwhisper" name="voice[]" value="whisper"/>    
<label for="checkboxwhisper">Whisper</label>
<input type="checkbox" id="checkboxmumble"  name="voice[]" value="mumble"/>    
<label for="checkboxmumble">Mumble</label>
<button type="submit">submit</button>
</form>

Answer 2

我所做的和不能接受的是，我安装了一个名为hpp的包https://www.npmjs.com/package/hpp.它从req.body中删除任何数组，只放入数组中的最后一个值。它有一个白名单的选项，这是我解决它的方法。