Экспресс-синтаксический анализ ярлыков в массиве

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

Ваша проблема заключается в использовании bodyParser на multipart/form-data форме. В документах bodyParser говорится: «Это не обрабатывает многочастные тела из-за их сложной и типично большой природы».

Если вы удалите 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('/'); 
    }); 
}); 

Answer 2

Анализатор 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