it-swarm.com.de

Erstellen Sie Multipart-/Formulardaten POST In Angular2 anfordern und den Eingabetyp File bestätigen

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

Die Anforderung POST sollte folgendermaßen aussehen:

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 als Inhaltskörper.

Ich versuche, die HTTP-Post-Methode von Winkel 2 zu verwenden, aber ich bin nicht ganz sicher, wie ich die Anfrage generieren kann. Folgendes habe ich:

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 feststellen, dass mir ein Teil fehlt, aber ich bin nicht sicher, was ich tun muss, um den binären Bilddaten Inhalt, Disposition & Typ usw. zu geben.

7
Gabe O'Leary

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;
      }
    };
  }
4
mayur

Bitte überprüfen Sie dieses Arbeitsbeispiel (nicht meines): https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - Ändern oder setzen Sie den Inhaltstyp nicht

2 - Verwenden Sie FormData, um Parameter zu senden

3 - Fügen Sie dies zu app.module.ts hinzu:

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');
    }
}
0
Alessandro

Ähnlich dieser Frage hier: Angular 2 - Datei an Web-API senden

Angular2 unterstützt noch keine multipart/form-data POST -Anfragen. Daher habe ich mich dazu entschieden, jQuery zu verwenden, um es zu implementieren, und konvertiere es dann in ein RxJs Observable (Betreff), um denselben Typ wie der http zu haben .post-Funktion in Angular2 sollte Folgendes haben:

//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;
0
Gabe O'Leary