如何使用angularjs2上傳文件（多部分）

Question

angular2是否支持多部分表單提交，可用的示例？

到特定於該文檔的任何鏈接是非常讚賞

見從角的github交https://github.com/angular/angular/issues/6030

****以後使用工作演示的XMLHttpRequest ****

任何示例展示更新發送FormData作爲http的一部分，

下面是一個對我很好的草案代碼，但想知道是否支持http

HTML

<input id="single_f_fileup" [(ngModel)]="model.image" type="file" (change)="selectFile($event)" name="single_fileup" /> 

ANGULAR2

selectFile($event): void { 
var files = $event.target.files || $event.srcElement.files; 
     var file = files[0]; 
     let formData = new FormData(); 
     formData.append("single_fileup", file); 
     formData.append('key1', 'value1'); 
     formData.append('key2', 'value2'); 
     var req = new XMLHttpRequest(); 
     req.open("POST", "/api/fileupload"); 
     req.send(formData); 
} 

6.2的NodeJS

var multer = require('multer'); 
var storage = multer.memoryStorage(); 
var upload = multer({ storage: storage }); 
    router.post('/api/fileupload', upload.single('single_fileup'), function(req, res, next){ 
     console.log(req.body,req.file); 
}); 

如何使下面的代碼工作？

this.http.post('/api/fileupload', formData) 
      .map(this.extractData) 
      .catch(this.handleError); 

Answer 1

示例代碼段傳遞FORMDATA包含圖像

https://gist.github.com/arciisine/ee57727e56cbc5e83739b2c24fd69658

https://github.com/angular/angular/issues/6030

import { Component, Input, AfterViewInit } from '@angular/core'; 
import { NgModel, DefaultValueAccessor, NgControl } from '@angular/forms'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 

@Component({ 
    selector: 'app-file-uploader', 
    template: '<input type="file" (change)="updated($event);">', 
    providers: [NgModel, DefaultValueAccessor] 
}) 
export class FileUploaderComponent implements AfterViewInit { 

    static ROOT = '/rest/asset'; 

    @Input() private companyId: string = ''; 
    private value: string; 
    private changeListener: Function; 

    constructor(private http: Http, private input: NgControl) { 
    this.input.valueAccessor = this; 
    } 

    ngAfterViewInit() { 
    } 

    writeValue(obj: any): void { 
    this.value = obj; 
    } 

    registerOnChange(fn: any): void { 
    this.changeListener = fn; 
    } 

    registerOnTouched(fn: any): void { 

    } 

    updated($event) { 
    const files = $event.target.files || $event.srcElement.files; 
    const file = files[0]; 
    const formData = new FormData(); 
    formData.append('file', file); 

    const headers = new Headers({}); 
    let options = new RequestOptions({ headers }); 
    let url = FileUploaderComponent.ROOT + (this.companyId ? '/' + this.companyId : ''); 

    this.http.post(url, formData, options).subscribe(res => { 
     let body = res.json(); 
     this.value = body.filename; 

     if (this.changeListener) { 
     this.changeListener(this.value); 
     } 
    }); 
    } 
} 

Answer 2

ng2-file-upload將成爲您的分段上傳指南。 AngularJs也有ng-file-upload以防你想看看指令。