Angular2 - フォームデータsubmit（（ngModel）でファイルをアップロードしてMongoDBに保存する方法

Question

私はこのタスクページを持っており、submitJob形式のファイルをNodeJs Expressサーバーにアップロードしたいとします。

@Component({ 
    selector: 'tasks', 
    template: `<div mdl class="mdl-grid demo-content"> 

      <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col"> 
       <h3>Create Task Page</h3> 

       <form action="#" (ngSubmit)="onSubmit()"> 
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
        <input class="mdl-textfield__input" type="text" id="taskname" [(ngModel)]="data.taskname"/> 
        <label class="mdl-textfield__label" for="taskname">Task Name</label>     
        </div> <br/> 
        <div class="mdl-textfield mdl-js-textfield"> 
        <textarea class="mdl-textfield__input" type="text" rows= "5" id="taskdesc" [(ngModel)]="data.taskdesc"></textarea> 
        <label class="mdl-textfield__label" for="taskdesc">Task Description</label> 
        </div> <br/> 
       <select [(ngModel)]="data.assignedto"> 
         <option *ngFor="#assign of dropdownValues" [ngValue]="assign.userEmail">{{assign.userEmail}}</option> 
        </select> 

       <div> <input type="file" placeholder="Upload file..."></div> <--How to handle this ? 

       <br/><br/> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">Create Task</button> 
       </form>   
      </div>  

    `, 
    directives: [ROUTER_DIRECTIVES, MDL] 
}) 

export class CreateTaskComponent implements OnInit { 

    data: any; 

    onSubmit(form) { 
    console.log(JSON.stringify(this.data));  
    this.apartmentService.postTasks(this.data).then(_=>this.router.navigate(['Tasks'])); 
    this.data = {}; 
    } 

} 

Server.ts

router.route('/api/newtask') 
    .post(function(req, res) {   
     var task = new Task(); 
     task.taskname = req.body.taskname; 
     task.taskdesc = req.body.taskdesc; 
     task.assignedto = req.body.assignedto; 
     task.taskstatus = 'OPEN'; 
     task.save(function(err) { 
      if (err) 
       res.send(err); 
      res.json({ message: 'Task created!' }); 
     }); 
    }) 

を次のようにデータを以下のようにMongoDBのためのマングースのmondelがあるexpressjsサーバーに送信されます。

マングースモデル

var mongoose = require('mongoose'); 
var Schema = mongoose.Schema; 

var TaskSchema = new Schema({ 
    taskname: String, 
    taskdesc: String, 
    taskcreator:String, 
    createddate: String, 
    assignedto: String, 
    taskstatus: String 
}); 

module.exports = mongoose.model('Task', TaskSchema); 

どのように私は、ファイルをアップロードして、フォーム上の現在のデータに関連付けることができますか？

Answer 1

plzはあなたが非常に簡単にサーバ側でmulterを使用することができ、この記事https://www.npmjs.com/package/multer を参照してください。

var express = require('express') 
var multer = require('multer') 
var upload = multer({ dest: 'uploads/' }) 

var app = express() 

app.post('/profile', upload.single('avatar'), function (req, res, next) { 
    // req.file is the `avatar` file 
    // req.body will hold the text fields, if there were any 
}) 

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) { 
    // req.files is array of `photos` files 
    // req.body will contain the text fields, if there were any 
}) 

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }]) 
app.post('/cool-profile', cpUpload, function (req, res, next) { 
    // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files 
    // 
    // e.g. 
    // req.files['avatar'][0] -> File 
    // req.files['gallery'] -> Array 
    // 
    // req.body will contain the text fields, if there were any 
})