एंगुलर 2 में मल्टीपार्ट/फॉर्म-डेटा पोस्ट अनुरोध बनाएं और इनपुट प्रकार फ़ाइल

Question

सत्यापित करें मेरे पास एक छवि (बेस 64) है जिसे मुझे POST अनुरोध के माध्यम से भेजने की आवश्यकता है (और प्रतिक्रिया के लिए प्रतीक्षा करें)। 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 

सामग्री शरीर के रूप में द्विआधारी छवि डेटा के साथ

: छवि Content-Type: image/jpg

के होने की पोस्ट अनुरोध की तरह दिखना चाहिए की जरूरत है।

मैं कोणीय 2 की एचटीपी पोस्ट विधि का उपयोग करने का प्रयास कर रहा हूं, लेकिन मुझे अनुरोध उत्पन्न करने के बारे में बिल्कुल यकीन नहीं है। यह है कि मैं क्या है:

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

मैं बता सकता है कि मैं इसके बारे में हिस्सा याद आ रही है, लेकिन मुझे यकीन है कि मैं द्विआधारी छवि डेटा देने के लिए यह सामग्री-विन्यास & प्रकार आदि है क्या करने की जरूरत नहीं कर रहा हूँ

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 अभी तक बहुखण्डीय/फार्म-डेटा पोस्ट अनुरोध का समर्थन नहीं करता है, तो मैं बजाय jQuery का उपयोग करने के लिए इसे लागू करने के लिए, और फिर इसे एक RxJs नमूदार में कन्वर्ट (निर्णय लिया

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

इस काम कर उदाहरण की जांच करें (मेरा नहीं): अधीन) क्या Angular2 में http.post समारोह होना चाहिए के रूप में एक ही प्रकार के लिए https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - cH न करें Ange या सेट सामग्री प्रकार

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