Creazione di richieste POST multipart/form-data in Angular2 e convalida Tipo di input File

Question

Ho un'immagine (base64) che devo inviare tramite una richiesta POST (e attendere la risposta). La richiesta POST deve essere di Content-Type:multipart/form-data. L'immagine deve essere di Content-Type: image/jpg

La richiesta POST dovrebbe essere simile:

POST https://www.url... HTTP/1.1 
Content-Type: multipart/form-data; boundary=-------------------------acebdf13572468 
User-Agent: Fiddler 
Host: www.host.com 
Content-Length: 199640 

---------------------------acebdf13572468 
Content-Disposition: form-data; name="fieldNameHere"; filename="Nikon Digital SLR Camera D3100 14.2MP 2.jpg" 
Content-Type: image/jpeg 

Con i dati di immagine binari come il corpo contenuto.

Sto tentando di utilizzare il metodo Http Post di angular 2, ma non sono abbastanza sicuro su come generare la richiesta. Questo è quello che ho:

let body = atob(imageData); 
let headers = new Headers({'Content-Type': 'multipart/form-data'}); 
let options = new RequestOptions({headers: headers}); 

this._http.post(url, body, options) 
.map(res=>{ 
    //do stuff 
}); 

posso dire che mi manca una parte di esso, ma non sono sicuro che cosa devo fare per dare i dati di immagine binaria è Content-Disposition & Tipo ecc

Answer 1

Form template

<form id="form" name="file" [formGroup]="FileFormGroup"(submit)="addFrom($event, FileFormGroup)" method="post"> 

    <input spellcheck="true" formControlName="Demo" name="Demo" type="text"/> 
    <input type="file" accept="image/*" id="file" name="File"/> 
    <input formControlName="File" type="hidden"/> 

</form> 

Ts

import {FormGroup, FormBuilder, FormControl, Validators} from '@angular/forms'; 

    import {ValidatorFn} from '@angular/forms/src/directives/validators'; 

    public FileFormGroup: FormGroup; /* variable */ 

    constructor(public fb: FormBuilder) {} 

    ngOnInit() { 
     this.FileFormGroup = this.fb.group({ 
     Demo: ["", Validators.required], 
     File: ["", this.fileExtension({msg: 'Please upload valid Image'})] 
    }); 
    } 

    public addFrom(event: Event, form: FormGroup): void { 

    if(form.valid && form.dirty) { 

    let formTemp: HTMLFormElement <HTMLFormElement>document.querySelector('#form'); 

    let formData: FormData = new FormData(formTemp); 

    let xhr: XMLHttpRequest = this.foo(formData); 

    xhr.onreadystatechange =() => { 
     if(xhr.readyState === 4) { 
     if(xhr.status === 201) { 
      console.log("Success"); 
     } else { 
      console.log("Error"); 
     } 
     } 
    } 
    }} 

    // Foo function 
    public Foo(formData){ 
     let url: Foo; 
     let xhr: XMLHttpRequest = new XMLHttpRequest(); 
     xhr.open('POST', url, true); 

     // enctype For Multipart Request 
      xhr.setRequestHeader("enctype", "multipart/form-data"); 

      // IE bug fixes to clear cache 
      xhr.setRequestHeader("Cache-Control", "no-cache"); 
      xhr.setRequestHeader("Cache-Control", "no-store"); 
      xhr.setRequestHeader("Pragma", "no-cache"); 

      xhr.send(formData); 
      return xhr; 
    } 

    /* validation function to check proper file extension */ 

    public fileExtension(config: any): ValidatorFn { 
    return (control: FormControl) => { 

     let urlRegEx: RegExp = /\.(jpe?g|png|gif)$/i; 

     if(control.value && !control.value.match(urlRegEx)) { 
     this.deleteImg = false; 
     return { 
      invalidUrl: config.msg 
     }; 
     } else { 
     return null; 
     } 
    }; 
    } 

Answer 2

simile a questa domanda qui: Angular 2 - Post File to Web API

Angular2 non supporta ancora le richieste multipart/form-data POST, così ho deciso di utilizzare jQuery invece per la sua attuazione, e quindi convertirlo in un RxJs osservabile (soggetto) per avere lo stesso tipo di quello che la funzione http.post in Angular2 dovrebbe avere:

//Convert Base64 Representation of jpeg to 
let imageData = imageString.split(',')[1]; 
let dataType = imageString.split('.')[0].split(';')[0].split(':')[1]; 
let binaryImageData = atob(imageData); 
let data = new FormData(); 
let blob = new Blob([binaryImageData], { type: dataType }) 
data.append('file', blob); 
let deferred = $.ajax({ 
    url: this._imageAPIBaseUrl, 
    data: data, 
    cache: false, 
    contentType: false, 
    processData: false, 
    type: 'POST' 
}); 
let observable = new AsyncSubject(); 

//When the Deferred is complete, push an item through the Observable 
deferred.done(function() { 

    //Get the arguments as an array 
    let args = Array.prototype.slice.call(arguments); 

    //Call the observable next with the same parameters 
    observable.next.apply(observable, args); 

    //Complete the Observable to indicate that there are no more items. 
    observable.complete(); 
}); 

//If the Deferred errors, push an error through the Observable 
deferred.fail(function() { 

    //Get the arguments as an array 
    let args = Array.prototype.slice.call(arguments); 

    //Call the observable error with the args array 
    observable.error.apply(observable, args); 
    observable.complete(); 
}); 

return observable; 

Answer 3

prega di consultare questo esempio di lavoro (non mia): https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - non ch ange o impostare il Content-Type

2 - Utilizzare formdata per inviare i parametri

3 - Aggiungi questo al app.module.ts:

import { HttpModule, RequestOptions, XHRBackend, ConnectionBackend, Http, Request, RequestOptionsArgs, Response, Headers } from '@angular/http'; 
@Injectable() 
export class HttpInterceptor extends Http { 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) 
    { 
     super(backend, defaultOptions); 
     defaultOptions.headers = new Headers(); 
     defaultOptions.headers.append('Content-Type', 'application/json'); 
    } 
}