2017-06-02 35 views
1

我發佈我的數據到postman服務,它工作正常。但是當我在HTTP post請求中調用服務時,它在控制檯中顯示成功,但formData變爲空,並且沒有任何內容保存在服務器上。Angular2 - formData值作爲NULL傳遞給HTTP POST

任何幫助,將不勝感激。我的代碼:

import { Component } from '@angular/core'; 
import { FormBuilder, Validators } from '@angular/forms'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions} from '@angular/http'; 
import 'rxjs/add/operator/catch'; 

@Component({ 
    selector: 'login-page', 
    templateUrl: './add.html' 
}) 
export class ConfigComponent { 
constructor(private http:Http) { 
    this.news = { 
     'newstitle': 'Test Title', 
     'newsdescription': 'Test', 
     'newstype': 'Test', 
     'priority': 'Test', 
     'place': 'Test', 
     'publishedon': 'Test', 
     'publishedby': 'Test', 
     'websiteurl': 'Test', 
     'contactpersonname': 'Test', 
     'mobile1': 'Test', 
     'mobile2': 'Test', 
     'email': 'Test', 
     'display': 'Test',  
     'rating': 'Test' 
    }; 
    } 

    onSubmit() { 
    let formData:FormData = new FormData(this.news); 
    console.log(this.news); 
    let headers = new Headers({'encrypt': 'multipart/form-data'}); 
    let options = new RequestOptions({ headers: headers }); 
    this.http.post('SERVICE URL', formData, options) 
     .subscribe(
      data => console.log(data), 
      error => console.log(error) 
     ); 
    } 
    } 

Add.html

<h2>ADD CONFIGS</h2> 
    <div class="row"> 
    <form (ngSubmit)="onSubmit()" #heroForm="ngForm"> 
    <div class="form-group col-xs-6"> 
     <label for="newstitle">NEWS TITLE:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.newstitle" id="newstitle" name="newstitle"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="newsdescription">NEWS DESCRIPTION:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.newsdescription" id="newsdescription" name="newsdescription"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="newstype">NEWS TYPE:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.newstype" id="newstype" name="newstype"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="priority">PRIORITY:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.priority" id="priority" name="priority"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="place">PLACE:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.place" id="place" name="place"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="publishedon">PUBLISHED ON:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.publishedon" id="publishedon" name="publishedon"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="publishedby">PUBLISHED BY:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.publishedby" id="publishedby" name="publishedby"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="websiteurl">WEBSITE URL:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.websiteurl" id="websiteurl" name="websiteurl"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="contactpersonname">CONTACT PERSON NAME:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.contactpersonname" id="contactpersonname" name="contactpersonname"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="mobile1">MOBILE 1:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.mobile1" id="mobile1" name="mobile1"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="mobile2">MOBILE 2:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.mobile2" id="mobile2" name="mobile2"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="email">EMAIL:</label> 
     <input type="email" class="form-control" [(ngModel)]="news.email" id="email" name="email"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="status">STATUS:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.status" id="status" name="status"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="display">DISPLAY:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.display" id="display" name="display"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="rating">RATING:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.rating" id="rating" name="rating"/> 
    </div>          

    <div class="form-group col-xs-6"> 
      <label for="usr">City Image:</label> 
      <img width="50px" height="50px" id="cimage"> 
      <input type="file" (change)="fileChange($event)" placeholder="Upload file"> 
    </div>  

    <button type="submit" class="btn btn-success">Add</button> 

    </form> 
</div> 

enter image description here

+0

['FormData'構造(HTTPS:

createAuthorizationHeader(headers: Headers, name: string, pw: string) { headers.append('Authorization', 'Basic ' + btoa('${name}:${pw}')); } createOptions(name: string, pw: string) { let headers = new Headers(); this.createAuthorizationHeader(headers, name, pw); // headers.append('Content-Type', 'multipart/form-data'); // <--- we can do post without this item. let options = new RequestOptions({ headers: headers }); return options; } 

然後,post可以這樣做: //developer.mozilla.org/en-US/docs/Web/API/FormData/FormData)需要一個表單元素。你爲什麼傳遞一個對象? – Saravana

回答

1

追加表單值(與文件)FORMDATA IN ANGULAR2。

其實有人發佈了我的問題的答案,實際上信貸給他,我做了一些修改,追加對象形成數據,以使其工作。 人們可以直接附加表單數據或迭代對象以將值添加到formData。 下面是我的工作代碼:

Component.ts

import { Component } from '@angular/core'; 
import { FormBuilder, Validators } from '@angular/forms'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions} from '@angular/http'; 
import 'rxjs/add/operator/catch'; 

@Component({ 
    selector: 'login-page', 
    templateUrl: './add.html' 
}) 
export class ConfigComponent { 
news; 
fileList; 
constructor(private http:Http) { 
    this.news = { 
     'newstitle': 'Test Title', 
     'newsdescription': 'Test Title', 
     'newstype': 'Test Title', 
     'priority': 'Test Title', 
     'place': 'Test Title', 
     'publishedon': 'Test Title', 
     'publishedby': 'Test Title', 
     'websiteurl': 'Test Title', 
     'contactpersonname': 'Test Title', 
     'mobile1': 'Test Title', 
     'mobile2': 'Test Title', 
     'email': 'Test Title', 
     'status': 'Test Title', 
     'display': 'Test Title',  
     'rating': 'Test Title' 
    }; 
    } 

     fileChange(event) { 
     this.fileList = event.target.files; 
     } 

    onSubmit() { 
    let formData:FormData = new FormData(); 

    formData.append('newstitle', this.news.newstitle); 
    formData.append('newsdescription', this.news.newsdescription); 
    formData.append('newstype', this.news.newstype); 
    formData.append('priority', this.news.priority); 
    formData.append('place', this.news.place); 
    formData.append('publishedon', this.news.newstitlpublishedone); 
    formData.append('publishedby', this.news.publishedby); 
    formData.append('websiteurl', this.news.websiteurl); 
    formData.append('contactpersonname', this.news.contactpersonname); 
    formData.append('mobile1', this.news.mobile1); 
    formData.append('mobile2', this.news.mobile2); 
    formData.append('email', this.news.email); 
    formData.append('status', this.news.status); 
    formData.append('display', this.news.display); 
    formData.append('rating', this.news.rating); 

    if(this.fileList.length > 0){ 
     for (var x = 0; x < this.fileList.length; x++) { 
     let file: File = this.fileList[x]; 
     formData.append('fileData', file, file.name); 
     } 
     let headers = new Headers({'encrypt': 'multipart/form-data'}); 
     let options = new RequestOptions({ headers: headers }); 
     this.http.post('SERVICE URL', formData, options) 
     .subscribe(
      data => console.log(data), 
      error => console.log(error) 
     ); 
    } else { 
     let headers = new Headers({'encrypt': 'multipart/form-data'}); 
     let options = new RequestOptions({ headers: headers }); 
     this.http.post('SERVICE URL', formData, options) 
     .subscribe(
      data => console.log(data), 
      error => console.log(error) 
     ); 
    } 
    } 
} 

ADD.html

<h2>ADD CONFIGS</h2> 
    <div class="row"> 
    <form (ngSubmit)="onSubmit()" #heroForm="ngForm"> 
    <div class="form-group col-xs-6"> 
     <label for="newstitle">NEWS TITLE:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.newstitle" id="newstitle" name="newstitle"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="newsdescription">NEWS DESCRIPTION:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.newsdescription" id="newsdescription" name="newsdescription"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="newstype">NEWS TYPE:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.newstype" id="newstype" name="newstype"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="priority">PRIORITY:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.priority" id="priority" name="priority"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="place">PLACE:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.place" id="place" name="place"/> 
    </div> 

    <div class="form-group col-xs-6"> 
     <label for="publishedon">PUBLISHED ON:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.publishedon" id="publishedon" name="publishedon"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="publishedby">PUBLISHED BY:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.publishedby" id="publishedby" name="publishedby"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="websiteurl">WEBSITE URL:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.websiteurl" id="websiteurl" name="websiteurl"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="contactpersonname">CONTACT PERSON NAME:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.contactpersonname" id="contactpersonname" name="contactpersonname"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="mobile1">MOBILE 1:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.mobile1" id="mobile1" name="mobile1"/> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="mobile2">MOBILE 2:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.mobile2" id="mobile2" name="mobile2"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="email">EMAIL:</label> 
     <input type="email" class="form-control" [(ngModel)]="news.email" id="email" name="email"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="status">STATUS:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.status" id="status" name="status"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="display">DISPLAY:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.display" id="display" name="display"/> 
    </div>          

    <div class="form-group col-xs-6"> 
     <label for="rating">RATING:</label> 
     <input type="text" class="form-control" [(ngModel)]="news.rating" id="rating" name="rating"/> 
    </div>          

    <div class="form-group col-xs-6"> 
      <label for="usr">City Image:</label> 
      <img width="50px" height="50px" id="cimage"> 
      <input type="file" id="newsimg" name="newsimg" multiple="true" (change)="fileChange($event)"> 
    </div>    

    <button type="submit" class="btn btn-success">Add</button> 

    </form> 
</div> 
0

首先,當你遇到這種情況,你應該檢查如果您的formData創建正確。一個簡單的方法來做到這一點是:

console.log(formData.get('newstitle')) // check 'newstitle' field

您還可以在formData對象檢查等領域。

@署Jamshed的答案應該是正確的。但是,如果你需要傳遞user_namepassword通過Headers,您可以創建options這樣的:

private imageUrl = 'http://192.168.201.211:8024/images/'; 
post(formData: FormData, user: string, pw: string): Promise<MyForm> { 
    let options = this.createOptions(user, pw); 
    console.log('we will have a post!'); 
    return this.http.post(this.imageUrl, formData, options) 
        .toPromise() 
        .then(res => res.json() as MyForm) 
        .catch(this.handleError); 
    }