Angular2でmultipart/form-data POSTリクエストを作成し、入力タイプを検証するファイル

Question

私はPOSTリクエストで送信し、応答を待つ必要がある画像（base64）を持っています。 POST要求はContent-Type:multipart/form-dataである必要があります。コンテンツ本体として、二値画像データで

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 

： 画像は、POSTリクエストがどのように見えるはずですContent-Type: image/jpg

であることが必要です。

私は角度2のHttp Postメソッドを使用しようとしていますが、リクエストの生成方法についてはあまりよく分かりません。 これは私が持っているものです。

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

私は、私はそれの一部をしないのですが、私は、私はそれがContent-処分&タイプなどのバイナリ画像データを与えるために何をする必要があるかわからないことがわかります

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

：Angular 2 - Post File to Web API

（Angular2はまだmultipart/form-dataのPOSTリクエストをサポートしていないので、私はそれを実装する代わりにjQueryを使用することを決定し、その後、RxJs観測に変換Angular2でhttp.post機能が持つべきものと同じタイプの持っている対象）：

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

は、この実施例（ない鉱山）をご確認ください：https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - をchしないでくださいANGEまたはセットのContent-Type

2 - 利用いるFormDataは、パラメータ

3を送信する - 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'); 
    } 
}