均值堆栈：如何使用nodejs expressjs和angular 6在mongodb中存储图像？

Question

I am building a MEAN Shop App, trying to store the product image in mongodb but some error is coming

typeError: cannot read the property 'productimage' of undefined

This is the route function for adding product

 function addProduct(req, res, next){ var newProduct = new Product({ productName: req.body.productname, productCategory: req.body.productcategory, productDescription: req.body.productdescription, productPrice: req.body.productprice }); newProduct.productImage.data = fs.readFileSync(req.file.productimage); newProduct.productImage.contentType = 'jpg'; newProduct.save(function(err){ if(err){ console.log("error saving product"); res.status(400).json({ success: false, message:'Error processing request '+ err}); } else{ console.log("product inserted"); res.status(201).json({ success: true, message: 'Product added successfully.' }); } }); } module.exports = {addProduct); 

This is the product model

 const mongoose = require('mongoose'); const Schema = mongoose.Schema; const productSchema = new Schema({ productname : { type: String }, productCategory: { type: String }, productDescription: { type: String }, productImage: { data: Buffer, contentType: String }, productPrice: { type: Number } }); module.exports = mongoose.model('product', productSchema, 'products'); 

This is the html file

 <form class="form-style-9" [formGroup]="productForm" (ngSubmit)="addProduct(productForm.value)" enctype="multipart/form-data" > <ul> <li><span>Product Name</span> <input type="text" name="productname" class="field-style field-full align-none" placeholder="Name" formControlName="productname" /> </li> <span>Product Category</span><br> <select formControlName="productcategory"> <option value="Clothing">Clothing</option> <option value="Electronics">Electronics</option> <option value="Books">Books</option> <option value="Toys">Toys</option> </select> <li><span>Product Description</span> <textarea name="productdescription" class="field-style" placeholder="Product Description" formControlName="productdescription"></textarea> </li> <li><span>Product Image</span> <input type="file" name="productimage" class="field-style field-full align-none" placeholder="Image" formControlName="productimage"/> </li> <li><span>Product Price</span> <input type="number" name="productprice" class="field-style field-full align-none" placeholder="Product Price" formControlName="productprice" /> </li> <li> <input type="submit" value="Add Product" /> </li> </ul> </form> 

this is component file

 export class ProductComponent implements OnInit { constructor(private fb: FormBuilder, private router: Router, private productService: ProductService, private toastr: ToastrService) { } ngOnInit() { } productName = new FormControl(""); productCategory = new FormControl(""); productDescription = new FormControl(""); productImage = new FormControl(""); productPrice = new FormControl(""); productForm: FormGroup = this.fb.group({ 'productname': this.productName, 'productcategory': this.productCategory, 'productdescription': this.productDescription, 'productimage': this.productImage, 'productprice': this.productPrice, }); addProduct(formdata:any) { this.productService.addProduct(this.productForm.value) .subscribe(data => { if (data.success === false) { this.toastr.error(data.message); } else { this.toastr.success(data.message); this.router.navigate([' ']); } this.productForm.reset(); }); } } 

I tried using multer but i dont think its working or may be i am coding it wrong. Please correct me what am i doing wrong.

I had created a different folder for storing image server/public/images , this is the same folder that contains routes and models server/models/ and server/routes/ .

This is the server file.

 var multer = require('multer'); var app = express(); var api = require('./server/routes/api'); var image = multer({ dest:'./server/public/' }); app.post('/product', image.single('images'), api.addProduct); 

What am i doing wrong here?

Answer 1

I think there is a problem with your multer configuration. Can you share your require's and multer middleware as well.

Also I have included a sample configuration below to configure your multer middleware.

 const multer = require('multer') var storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, './path/to/file') }, filename: (req, file, cb) => { cb(null, "PDFS-"+file.originalname.substring(0, file.originalname.lastIndexOf('.')) + '-' + Date.now()+(path.extname(file.originalname)).toLowerCase()) } }); var upload = multer({ storage: storage, fileFilter: function (req, file, callback) { var ext = (path.extname(file.originalname)).toLowerCase(); if(ext !== '.pdf') { return callback(new Error('Only pdf format files are allowed!')) } callback(null, true) }, limits:{ fileSize: 1024*1024 } }); app.post('/upload', function(req, res, next){ upload.single('productimage')(req, res, function (err) { if (err) { console.log("upload err"+err); res.render('upload'); return; } else{ if (req.file===undefined) { console.log("empty"); res.render('upload'); } else{ console.log("done"); res.render('upload'); } } }); });