Javascript 使用nodeJs、angularJs、mongoose上传带有表单数据的图像
Javascript 使用nodeJs、angularJs、mongoose上传带有表单数据的图像,javascript,angularjs,node.js,mongodb,Javascript,Angularjs,Node.js,Mongodb,我正在开发一个表单,其中包含表单数据和图像。 我可以使用multer保存图像 还可以保存到猫鼬的图像路径。 但我无法将阵列数据保存到mongoose。 角度模板 <form role="form" enctype="multipart/form-data> <div class="form-group"> <label>Product Name</label> <input type="text" class=
我正在开发一个表单,其中包含表单数据和图像。
我可以使用multer保存图像
还可以保存到猫鼬的图像路径。
但我无法将阵列数据保存到mongoose。
角度模板
<form role="form" enctype="multipart/form-data>
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" ng-model="product.productName" placeholder="Enter Product Name">
</div>
<div class="form-group">
<label>Product Description</label>
<input type="text" class="form-control" ng-model="product.productDescription" placeholder="Enter product Description">
</div>
<div class="form-group">
<label>Product Thumbnail</label>
<input type="file" id="file"><br><br>
</div>
<fieldset data-ng-repeat="val in product.productStock">
<div class="pull-right" ng-show="$last" ng-click="removeChoice()" style="color:red; cursor: pointer;margin-right: 10px;"><i class="fa fa-times fa-1x" aria-hidden="true"></i></div>
<h4><i class="fa fa-clone" aria-hidden="true"></i> Product Variant</h4>
<hr>
<label>size</label>
<input type="text" class="form-control" ng-model="val.size" placeholder="Enter product size">
</div>
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control" ng-model="val.price" placeholder="Enter price">
</div>
<div class="form-group">
<label>Color</label>
<select ng-model="val.color" class="form-control">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
<option value="brown">Brown</option>
<option value="yellow">Yellow</option>
</select>
</div>
<div class="form-group">
<label>Quantity</label>
<input type="text" class="form-control" ng-model="val.quantity" placeholder="Enter quantity">
</div>
<div class="form-group">
<label>Image</label>
<input type="text" class="form-control" ng-model="val.imagePaths" placeholder="Enter image path">
</div>
<div class="form-group">
<label>Stock status</label>
<select ng-model="val.inStock" class="form-control">
<option value="Availble">Availble</option>
<option value="Not Availble">Not Availble</option>
</select>
</div>
</fieldset>
角度控制器
$scope.product = {};
$scope.newProduct = function(){
var formData = new FormData;
for(key in $scope.product){
formData.append(key, $scope.product[key]);
}
//getting the files
var file = $('#file')[0].files[0];
formData.append('image', file);
//Post data
$http.post('http://localhost:3000/products/api/new-product',formData,{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).then(function(res){
$scope.item = res.data;
});
console.log($scope.product);
}<br/>
我可以将这些值保存到mongoose:productName: req.body.productName,
productDescription: req.body.productDescription,
productThumbnail: filename
但是对于productStock我无法将数据发布到mongoose。
对于productStock,我是这样做的:
productStock:[{size=req.body.productStock.size}]
即使在我记录
req.body.productStock.size
时,我也没有定义。但我可以在角度控制台中看到productStock。
为什么这是绑定数据,而节点js是未定义的字段太少?
请帮助..req.body.productStock的日志是什么?它是[object object]共享您的角度模板或$scope.Product的结构添加了有问题的角度模板。我想您将在req.body.productStock[0]中获得数据.size您可以循环通过req.body.productStock并构建用于保存的对象req.body.productStock的日志是什么?它是[object object]共享您的角度模板或$scope.product的结构添加了有问题的角度模板。我想您将在req.body.productStock[0]中获得数据.size您可以在req.body.productStock中循环,并构建要保存的对象
router.post('/api/new-product',upload.any(),function(req, res, next){
if(req.files){
req.files.forEach(function(file){
var filename = (new Date()).valueOf() + '-' + file.originalname;
fs.rename(file.path,'public/images/'+ filename, function(err){
if (err) throw err;
//Save to mongoose
var product = new Products({
productName: req.body.productName,
productDescription: req.body.productDescription,
productThumbnail: filename
});
product.save(function(err, result){
if(err){}
res.json(result);
});
});
});
}
})
productName: req.body.productName,
productDescription: req.body.productDescription,
productThumbnail: filename