Comment télécharger des fichiers (multipart) en utilisant angularjs2

Question

Est-ce que angular2 prend en charge la soumission en plusieurs parties, un exemple est-il disponible?

Tout lien vers docs spécifiques à cette question est très apprécié

Voir post de github angulaire https://github.com/angular/angular/issues/6030

**** Mise à jour plus tard avec le travail de démonstration en utilisant XMLHttpRequest ****

Tout exemple mettant en vedette envoi FormData dans le cadre de http,

Ci-dessous est un projet de code qui fonctionne bien pour moi, mais je voudrais savoir si même pris en charge dans 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); 
}); 

Comment faire ci-dessous le travail de code?

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

Answer 1

extrait de l'échantillon pour passer formData qui contient l'image

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 sera votre guide pour le téléchargement en plusieurs parties. AngularJs a également ng-file-upload dans le cas où vous voulez jeter un oeil à la directive.