在Angular 4中上傳圖片並保存到Mongoose DB

Question

還有其他關於上傳Angular 4圖片的問題，但沒有全面的答案。我玩過ng2-file-upload和angular2-image-upload，但是無法將它們保存在我的Mongo/Mongoose數據庫中。這是我要遠......

組件的HTML：

<form (submit)="newProduct(formData)" #formData="ngForm"> 
 
    <div class="form-group"> 
 
    <label for="name">Product Name:</label><input type='text' name='name' class="form-control" id="name" ngModel> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="image">Image:</label><input type="file" name='image' class="form-control" id="image" ngModel> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="description">Description:</label><input type='text' name='description' class="form-control" id="description" ngModel> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="quantity">Quantity:</label><input type='number' name='quantity' class="form-control" id="quantity" ngModel> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Add</button> 
 
</form>

Component.ts

import { Component, OnInit } from '@angular/core'; 
 
import { AddService } from './add.service'; 
 
... 
 
export class AddComponent implements OnInit { 
 

 
    constructor(private _addService:AddService) { } 
 

 
    ngOnInit() { 
 
    } 
 

 
    newProduct(formData){ 
 
    this._addService.addProduct(formData.value) 
 
     .then(()=>{ 
 
      formData.reset() 
 
     }) 
 
     .catch(err=>console.log(err)) 
 
    } 
 
}

Compoenent服務

import { Injectable } from '@angular/core'; 
 
import { Http, Response } from '@angular/http'; 
 
import 'rxjs'; 
 

 
@Injectable() 
 
export class AddService { 
 

 
    constructor(private _http:Http) { } 
 

 
    addProduct(newprod){ 
 
    return this._http.post('/api/newprod', newprod).map((prod:Response)=>prod.json()).toPromise(); 
 
    } 
 
}

控制器

addProduct:(req,res)=>{ 
 
    let newProd = new Product(req.body); 
 
    newProd.save((err,savedProd)=>{ 
 
     if(err){ 
 
     console.log("Error saving product"); 
 
     } else { 
 
     res.json(savedProd); 
 
     } 
 
    }) 
 
    },

架構：

var mongoose = require('mongoose'); 
 
var Schema = mongoose.Schema; 
 
var ProductSchema = new Schema({ 
 
    name: {type:String,required:true}, 
 
    image: {data:Buffer, contentType:String}, 
 
    description: {type:String,required:true}, 
 
    quantity: {type:Number,required:true}, 
 
}, {timestamps:true}) 
 
var Product = mongoose.model('Product', ProductSchema);

所有其他輸入使其回到數據庫罰款。我需要做些什麼才能正確保存圖像？

Answer 1

恐怕你不能直接上傳這樣的圖像。首先，您可以從文件標籤訪問圖像數據並將其分配到formdata中。

，你可以嘗試像this.In您的組件

newProduct(formData){ 
    let inputEl: HTMLInputElement = this.el.nativeElement.querySelector('#image'); 
      let fileCount: number = inputEl.files.length; 
      let formData = new FormData(); 
      if (fileCount > 0) { 
        formData.append('image', inputEl.files.item(0)); 
      } 

this._addService.addProduct(formData.value) 
     .then(()=>{ 
      formData.reset() 
     }) 
     .catch(err=>console.log(err)) 
    } 

    } 

這是不準確的工作解決方案，但你可以這樣開始。