Node.js Angular2-如何上传带有表单数据提交[（ngModel）]的文件并在MongoDB中保存引用

我有这个任务页面，想上传一个带有表单submit的文件到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 = {};
    }

}

mongodb的猫鼬蒙代尔如下

猫鼬模型

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);

---

如何上载文件并将其与表单上的当前数据关联

请看这篇文章https://www.npmjs.com/package/multer 您可以在服务器端使用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 
})

---

请看这篇文章

https://www.npmjs.com/package/multer

您可以在服务器端使用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 
})

---

是的，我让Multer去工作，但不知道如何处理表单数据。需要将文件与表单数据关联。请参见：

http://stackoverflow.com/questions/32423348/angular2-post-uploaded-file

是的，我让Multer去工作，但不确定如何处理表单数据。需要将文件与表单数据关联。请参见：

http://stackoverflow.com/questions/32423348/angular2-post-uploaded-file