web-dev-qa-db-fra.com

Construire multipart/form-data POST demande dans Angular2 et valide le type de fichier d'entrée

J'ai une image (base64) que je dois envoyer via une demande POST (et attendre la réponse). La demande POST doit être de Content-Type:multipart/form-data. L'image doit être de Content-Type: image/jpg.

La demande POST devrait ressembler à ceci:

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

Avec les données d'image binaires comme corps du contenu.

J'essaie d'utiliser la méthode Http Post de Angular 2, mais je ne suis pas tout à fait sûr de savoir comment générer la demande . C'est ce que j'ai:

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

Je peux dire qu'il m'en manque une partie, mais je ne suis pas sûr de ce que je dois faire pour donner aux données de l'image binaire son contenu-disposition et type, etc.

javascriptangulartypescriptpostangular2-forms
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

Veuillez vérifier cet exemple de travail (pas le mien): https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - Ne changez pas ou ne définissez pas le type de contenu

2 - Utiliser FormData pour envoyer des paramètres

3 - Ajoutez ceci à 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');
    }
}
0
Alessandro

Semblable à cette question ici: Angular 2 - Publier un fichier dans une API Web

Angular2 ne supporte pas encore les requêtes multipart/form-data POST, j'ai donc décidé d'utiliser plutôt jQuery pour l'implémenter, puis de le convertir en RxJs Observable (sujet) pour avoir le même type que ce que http.post la fonction dans Angular2 devrait avoir:

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