Mehrteilige/Form-Daten-POST-Anfrage in Angular2 erstellen und validieren Eingabetyp Datei

Question

Ich habe ein Bild (base64), die ich über eine POST-Anfrage senden muss (und auf die Antwort warten). Die POST-Anforderung muss Content-Type:multipart/form-data sein. Das Bild muss von Content-Type: image/jpg

Die POST-Anforderung aussehen sollte sein: als Inhalt Körper

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 

Mit den binären Bilddaten.

Ich versuche, die Http Post-Methode von Winkel 2 zu verwenden, aber ich bin mir nicht ganz sicher, wie Sie die Anfrage generieren. Das ist, was ich habe:

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

Ich kann sagen, dass ich ein Teil davon bin fehlt, aber ich bin nicht sicher, was ich tun muss, um das binäre Bilddaten zu geben, es ist Content-Disposition & Typ usw.

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

ähnlich wie diese Frage hier: Angular 2 - Post File to Web API

Angular2 noch nicht multipart/form-data POST-Anfragen unterstützen, so habe ich beschlossen, jQuery zu verwenden, anstatt es zu implementieren, und wandeln sie dann zu einem RxJs beobachtbare (subject) als die gleiche Art zu haben, was die http.post Funktion in Angular2 haben sollte:

//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

Bitte lesen Sie in diesem Arbeitsbeispiel (nicht von mir): https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - nicht ch ange oder stellen Sie den Content-Type

2 - Verwenden Sie Formdata-Parameter senden

3 - Fügen Sie diese auf 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'); 
    } 
}