Comment télécharger des fichiers(multipart) à l'aide de angularjs2

Ne angular2 prend en charge plusieurs parties soumettre le formulaire, tous les exemples disponibles?

Un lien vers les docs spécifiques à ce est très apprécié

Voir le post angulaires github https://github.com/angular/angular/issues/6030

**** Mise à jour plus tard, avec Démonstration à l'aide de XMLHttpRequest ****

Un exemple mettant en valeur l'envoi de FormData dans le cadre de http,

Ci-dessous est un projet de code qui fonctionne très bien pour moi, mais, comme de 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 code du travail?

 this.http.post('/api/fileupload', formData)
            .map(this.extractData)
            .catch(this.handleError);
InformationsquelleAutor tomalex | 2016-09-27
  1. 14

    Extrait d'exemple 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);
      }
    });
  }
}
    • Bonne réponse, la plupart des réponses que j'ai vu l'utilisation de Javascript pas angulaire. Pourrais-je vous suggérer l'ajout de code critique dans votre réponse, de sorte que lorsque les liens brisés, la réponse reste pertinente.
    InformationsquelleAutor tomalex
  2. 4

    ng2-téléchargement de fichier sera votre guide pour multipart télécharger. AngularJs ont également ng-téléchargement de fichier dans le cas où vous voulez avoir un coup d'oeil à la directive.

    • Puis-je faire des post de formulaire avec des champs et des fichiers en même temps
    • Oui, vous le pouvez. Rememeber à remplacer " onBeforeUploadItem à l'intérieur de ngInit()` pour capturer toutes les données avant de les soumettre.
    • Ne ng2-fichier de téléchargement de prise en charge d'envoyer les morceaux et pour les gros fichiers?
    • Hé, mon pote, Désolé d'avoir été un moment depuis que je l'ai utilisé. Vous pourriez vouloir vérifier avec leur documentation.
    InformationsquelleAutor Cyclotron3x3