angular वरण आप कोणीय 2 में फॉर्मडाटा ऑब्जेक्ट कैसे पोस्ट करते हैं?




रेखीय वेग किसे कहते हैं (4)

मैंने इस समस्या को हल किया, content-type बिल्कुल आवश्यकता नहीं है।

यहां देखें, https://stackoverflow.com/a/45879409/2803344

यह भी देखने के लिए यहां देखें कि प्रत्येक अनुरोध के लिए headers , कोणीय 2 - सेट हेडर सेट कैसे करें

2017/08/25

मुझे एक फाइल अपलोड करने और इसके साथ कुछ जेसन भेजने की ज़रूरत है, मेरे पास यह कार्य है:

POST_formData(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem('authtoken');

        if (authtoken) {
            headers.append("Authorization", 'Token ' + authtoken)
        }

        headers.append("Accept", 'application/json');
        headers.delete("Content-Type");

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: data
        })

        return this.http.request(new Request(requestoptions))

        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        })
    }

मेरा मुद्दा यह है कि, यदि मैं content-type को " multipart/form-data " पर सेट करता हूं तो मेरा सर्वर सीमाओं के बारे में शिकायत करता है, अगर मैं content-type शीर्षलेख को पूरी तरह से हटा देता हूं, तो मेरा सर्वर शिकायत करता है कि यह " text/plain " समर्थित मीडिया प्रकार ।

तो, आप कोणीय 2 के साथ फॉर्मडेटा कैसे भेजते हैं?


टेम्पलेट:

<label class="btn btn-primary">
  <input type="file" style="display: none;" multiple="true" (change)="fileChange($event)" accept=".xml">
  <span>Click Me!</span>
</label>

यूपीडी: कोणीय 5 - एचटीपी क्लाइंट + टाइपस्क्रिप्ट

onFileUpload(event: EventTarget) {

  const eventObj: MSInputMethodContext = <MSInputMethodContext>event;
  const target: HTMLInputElement = <HTMLInputElement>eventObj.target;
  const files: FileList = target.files;

  const formData: FormData = new FormData();

  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }

  // POST
  this.httpClient.post<AnalyzedData>(uploadUrl, formData).subscribe(...);
}

पुराने एचटीपी lib - कोणीय से पहले 4.3 :

fileChange(event) {
    let files = event.target.files;
        if (files.length > 0) {
        let formData: FormData = new FormData();
        for (let file of files) {
             formData.append('files', file, file.name);
        }
        let headers = new Headers();
        headers.set('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(uploadURL, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
            data => {
                // Consume Files
                // ..
                console.log('uploaded and processed files');
            },
            error => console.log(error),
            () => {
                this.sleep(1000).then(() =>
                    // .. Post Upload Delayed Action
                )
            });
    }
}

मुझे पता है कि इसका उत्तर दिया गया है और यह बहुत पुराना है, हालांकि मुझे OpenDdConnect AuthServer पर FormData ऑब्जेक्ट पोस्ट करने में कोई समस्या थी, और उपरोक्त फ़ाइल अपलोड उदाहरण वह नहीं थे जो मैं ढूंढ रहा था।

यहां मेरी सेवा है जो ओपनआईडऑथ टोकन प्राप्त करती है:

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers, URLSearchParams} from '@angular/http'
import { OpenIdTokenRequest, SmartData } from '../model/openid-token-request';
import { OpenIdToken } from '../model/openid-token';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from 'rxjs';

@Injectable()

export class TokenService {

    constructor(private _http: Http) { }

    getToken(requestData: OpenIdTokenRequest, smartData: SmartData) {
        let _urlParams = new URLSearchParams();
        _urlParams.append('code', requestData.code);
        _urlParams.append('grant_type', requestData.grantType);
        _urlParams.append('redirect_uri', requestData.redirectUri);
        _urlParams.append('client_id', requestData.clientId);

        let _url = smartData.tokenUri;
        let _options = this.getTokenPostOptions();

        return this._http.post(_url, _urlParams, _options)
            .map(response => <OpenIdToken>response.json())
    }

    private getTokenPostOptions(): RequestOptions {

        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });
        let options = new RequestOptions({ headers: headers });

        return options;
    }

}

यह Angular2 गिट रिपोजिटरी पर एक ओपन इसुयू है , और एक पुल अनुरोध भी विलय करने का इंतजार कर रहा है, उम्मीद है कि इसे जल्द ही विलय कर दिया जाएगा।

वैकल्पिक रूप से,

आप इसके लिए XMLHttpRequest ऑब्जेक्ट का उपयोग सीधे कर सकते हैं।

और हेडर सेट करना न भूलें

xhr.setRequestHeader("enctype", "multipart/form-data");

// IE workaround for Cache issues
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Cache-Control", "no-store");
xhr.setRequestHeader("Pragma", "no-cache");

आपके द्वारा XMLHttpRequest गए XMLHttpRequest पर।

समान प्रश्न:

Angular2 में फ़ाइल कैसे अपलोड करें

इनपुट प्रकार = फ़ाइल से कोणीय 2 फ़ाइल अपलोड करें

कोणीय 2 पोस्ट अपलोड फ़ाइल





angular2-http