Wie lade ich Dateien hoch (multipart) mit angularjs2

Question

Kann angular2 mehrteilige Formulare senden, jedes verfügbare Beispiel?

Jeder Link zu docs spezifisch für diesen sehr geschätzt

Siehe Beitrag von Winkeln Github https://github.com/angular/angular/issues/6030

**** Aktualisierte später mit Working Demo mit XMLHttpRequest ****

Jedes Beispiel präsentiert Senden FormData als Teil von http,

Unten ist ein Entwurf Code, der für mich gut funktioniert, aber gerne wissen, ob die gleiche unterstützt in 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); 
}); 

Wie unten Code funktioniert?

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

Answer 1

Beispiel Schnipsel Formdata übergeben, das Bild enthält

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 wird Ihr Leitfaden für mehrteilige Upload sein. AngularJs haben auch ng-file-upload für den Fall, dass Sie Direktive ansehen wollen.