Express项目中表单多选select无法正确返回数组的问题求助

1. 修正表单Select的name属性 #

原代码里的name="product[categories[]]"写法错误，正确的嵌套数组命名应该是product[categories][]，这样表单提交时才能让解析器把选中项识别为product.categories数组：

<div class="form-group row mb-3">
    <label for="categories" class="col-form-label sol-sm-2">Categories:</label>
    <div class="col-sm-10">
        <select multiple name="product[categories][]" id="categories" class="form-control">
            <% for (let category of categories) { %>
            <option value="<%= category.id %>">
                <%= category.name %>
            </option>
            <% } %>
        </select>
    </div>
</div>

2. 配置Express的Body解析器 #

确保你的Express应用启用了支持嵌套对象解析的urlencoded中间件，必须设置extended: true，否则无法正确解析嵌套的数组结构：

const express = require('express');
const app = express();

// 启用支持嵌套对象/数组的body解析
app.use(express.urlencoded({ extended: true }));

3. 服务器端兜底处理（可选） #

如果遇到单选时返回单个值而非数组的情况，可以在服务器端做统一处理，确保product.categories始终是数组类型：

app.post('/products', (req, res) => {
    let product = req.body.product;
    
    // 强制categories为数组：单选时包装成数组，未选择时设为空数组
    product.categories = Array.isArray(product.categories) 
        ? product.categories 
        : (product.categories ? [product.categories] : []);
    
    // 后续的产品保存逻辑...
    res.send('产品添加成功');
});

问题原因说明 #

• 原表单的name="product[categories[]]"写法不符合URL编码规则，解析器会将其识别为独立的键名product[categories，而非嵌套在product对象下的categories数组。
• 仅使用product[categories]时，单选场景下解析器会返回单个字符串而非数组，可能导致后续逻辑出现类型错误。
• extended: true是解析嵌套结构的关键，它允许Express的urlencoded解析器处理多层嵌套的对象和数组，默认的extended: false只能解析扁平键值对。

内容的提问来源于stack exchange，提问作者Bartlomiej Dlugosz