Jak przesłać pliki (wieloczęściowe) za pomocą metody angularjs2

Question

Czy program angular2 obsługuje przesyłanie wieloczęściowe, czy jest dostępny przykład?

dowolny link do Dokumenty specyficzne dla tego jest bardzo doceniana

patrz post z kątowym github https://github.com/angular/angular/issues/6030

**** Aktualizacja później Demo jest wykonywana przy użyciu XMLHttpRequest ****

Wszelkie przykład wystawiających wysyłanie FormData jako część http,

Poniżej znajduje się projekt kodu, który działa dobrze dla mnie, ale chciałbym wiedzieć, czy to samo obsługiwane w 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); 
} 

NODEJS 6,2

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

Jak zrobić poniżej pracy kodu?

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

Answer 1

przykładowy fragment przejść formData który zawiera obraz

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 będzie Twoim przewodnikiem do wysyłania wieloczęściowego. AngularJs ma także ng-file-upload na wypadek, gdybyś chciał rzucić okiem na dyrektywę.