如何在Angular 2的HTTP POST请求中发送表单数据？

Question

我正在尝试将更新后的用户详细信息表单数据发送到基于Angular 2中的Node服务器的后端。但是，我无法发送表单数据，服务器响应状态为500。在AngularJS中，我做过类似这样的事情， 服务文件。

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

在控制器中使用

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

我无法在Angular 2中找到angular.toJson、angular.identity和transformrequest功能，因此无法弄清楚如何实现这一点， 到目前为止，我在Angular 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);
    })
}

我已经阅读了很多帖子并尝试了一些方法，但迄今为止都没有成功。有人可以建议我如何做吗？

- akila arasan

---

你具体在哪里遇到了问题？控制台中有错误吗？ - eko

没有控制台错误，当我运行在AngularJS中创建的相同应用程序时，服务器正常工作，但响应状态为500。 - akila arasan

如果您确定帖子的URL是正确的，那么您能否将发送的body变量JSON.stringify一下？也许将“Content-Type”更改为“application/json”。 - eko

当我尝试使用其中一个或两个时，请求有效载荷会更改为 {}。 - akila arasan

Answer 1

如果你的服务器控制器要求，你可以添加头部信息；否则，你可以像这样直接发布：

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

- Sahil Daga

---

我感到困惑，例如我该如何发送这个："&client_secret=" + "abc123" +"&username=" + user +"&password=" + pass; - ValRob

@ValRob 请看这里：https://dev59.com/mFcO5IYBdhLWcg3wpTKW#45470576 - Mulperi

Answer 2

这是一个用于在Angular2中构建POST请求的功能性解决方案，您不需要Authorization头。

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

- Joffrey Outtier

---

实际上，应该使用'application/x-www-form-urlencoded'而不是'application/X-www-form-urlencoded'。小写的X。在我改变之前，我一直收到400错误请求。 - Boyan Kushlev

这种方法对我有效。 - exequielc

Answer 3

这是我在 Angular 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);
  }

这种方法用于将单个文件上传到服务器目录。

- muhammad zaman

---

虽然这段代码可能回答了问题，但提供关于为什么和/或如何回答问题的额外背景信息可以提高其长期价值。 - rollstuhlfahrer

Answer 4

最终答案发送如下，运行良好。

         const input = new FormData();
            input['payload'] = JSON.stringify(param);
             console.log(input);
                  alert(input);
                return this.httpClient.post(this.hostnameService.razor + 'pipelines/' + 
                    workflowId, input).subscribe(value => {
                 console.log('response for Manual Pipeline ' + value);
                 return value;
                   }, err => {
                     console.log(err);
                     }); 

- Vineet Verma

Answer 5

这是我的应用程序中运行良好的方法。

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

- John Baird

---

这个回答似乎没有特别解释如何提交表单数据。它看起来像一个带有普通字符串化 JSON 主体的请求。那么表单数据在哪里？ - user428517