角度2のhttp投稿要求でフォームデータを送信するにはどうすればよいですか？

Question

更新されたユーザーの詳細のフォームデータをバックエンドに送信しようとしていますが、角度2のどのノードサーバーでもフォームデータを送信できませんでした。サーバーは500のステータスで応答します。私はangular.toJson、angular.identityとTRANSFとして、角度2でこれを行う方法を理解することができませんでしたこの、 サービスファイル

var fd = new FormData(); 
var user = { 
    _id: StorageFactory.getUserDetail()._id, 
    loc: locDetails 
}; 
fd.append('user', angular.toJson(user)); 
UserService.update(fd). 
$promise.then(
    function(value) { 
    console.info(value); 
    updateUserDetailsInStorage(); 
    }, 
    function(err) { 
    console.error(err); 
    } 
); 

としてのコントローラで

update: { 
    method: 'POST', 
    params: { 
     dest1: 'update' 
    }, 
    transformRequest: angular.identity, 
    'headers': { 
     'Content-Type': undefined 
    } 
    } 

ormrequest機能は、私は多くの記事を読んで、いくつかのことを試してみました、2角度で使用できない これまでのところ、私は角2で次のように行っている、

let fd = new FormData(); 
let user = { 
    _id: this.appManager.getUserDetail()._id, 
    loc: locDetails 
}; 
fd.append('user', JSON.stringify(user)); 
this.userService.update(fd).subscribe((value) => { 
    console.log(value); 
    this.updateUserDetailsInStorage(); 
}, (err) => { 
    console.error(err); 
}); 

HTTPサービスファイル

update(body) { 
    console.log('update', body); 
    const headers = new Headers({ 
    'Content-Type': undefined 
    }); 

    const options = new RequestOptions({ 
    headers: headers 
    }); 
    return this.http.post(`${app.DOMAIN}` + 'user/update', body, options) 
    .map((res: Response) => { 
     res.json(); 
    }).do(data => { 
     console.log('response', data); 
    }) 
} 

が、これまでのところ成功しなかった、誰も私にこれをする方法を提案することができますか？

Answer 1

ここではうまく動作する私のアプリからの方法です。

updateProfileInformation(user: User) { 
    this.userSettings.firstName = user.firstName; 
    this.userSettings.lastName = user.lastName; 
    this.userSettings.dob = user.dob; 

    var headers = new Headers(); 
    headers.append('Content-Type', this.constants.jsonContentType); 

    var s = localStorage.getItem("accessToken"); 
    headers.append("Authorization", "Bearer " + s); 
    var body = JSON.stringify(this.userSettings); 

    return this.http.post(this.constants.userUrl + "UpdateUser", body, { headers: headers }) 
     .map((response: Response) => { 
     var result = response.json(); 
     return result; 
     }) 
     .catch(this.handleError) 
    } 

Answer 2

これは、Angular2でPOSTリクエストを作成するための機能的解決策です。承認ヘッダーは必要ありません。

var headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

let options = new RequestOptions({ headers: headers }); 

var body = "firstname=" + user.firstname + "&lastname=" + user.lastname + "&username=" + user.username + "&email=" + user.email + "&password=" + user.password; 

return new Promise((resolve) => { 
       this.http.post("http://XXXXXXXXXXX/users/create", body, options).subscribe((data) => { 
       if (data.json()) { 
        resolve(data.json()); 
       } else { 
        console.log("Error"); 
       } 
      } 
     ) 
    }); 

Answer 3

サーバーコントローラは、他のそれを必要とする場合は、ヘッダを追加することができますあなたは、単にここでは、この

let body = new FormData(); 
body.append('email', 'emailId'); 
body.append('password', 'xyz'); 
this.http.post(url, body); 

Answer 4

のようにそれを投稿することができますが、私は、ファイルをアップロードするための角度4で使用してきた方法です....宇井

<input type="file"id="file"(change)="handleFileInput($event)"> 

と、私はこれを追加しました.TSファイルの ....

handleFileInput(event) { 
    let eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
    let target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
    let files: FileList = target.files; 
    this.fileToUpload = files[0]; 
    console.log(this.fileToUpload); 
    } 



uploadFileToActivity() { 
    console.log('Uploading file in process...!' + this.fileToUpload); 
    this.fontService.upload(this.fileToUpload).subscribe(
     success => { 
     console.log(JSON.stringify(this.fileToUpload)); 
     console.log('Uploading file succefully...!'); 
     console.log('Uploading file succefully...!' + JSON.stringify(success)); 
     }, 
     err => console.log(err), 
    ); 
    } 

やサービス、あなたが正確に失敗した

upload(fileToUpload: File) { 
    const headers = new Headers({'enctype': 'multipart/form-data'}); 
    // headers.append('Accept', 'application/json'); 
    const options = new RequestOptions({headers: headers}); 
    const formData: FormData = new FormData(); 
    formData.append('file', fileToUpload, fileToUpload.name); 
    console.log('before hist the service' + formData); 
    return this.http 
     .post(`${this.appSettings.baseUrl}/Containers/avatar/upload/`, formData , options).map(
     res => { 
      const data = res.json(); 
      return data; 
     } 
    ).catch(this.handleError); 
    }