在服务器上发送表单数据时面临问题答案

【问题标题】：Facing problem in sending form data on the server在服务器上发送表单数据时面临问题
【发布时间】：2019-11-19 13:17:40
【问题描述】：

我正在研究角度
我试图通过表单数据发送文件和数据
但是当我将表单数据发送到服务器时，它正在发送 null

让我分享我的代码

component.ts 文件

  const token  = localStorage.getItem('currentUser');
  const formData  = new FormData();

  formData.append('proposal_details' , this.PackageDetails.get('proposal_details').value);
  formData.append('businessName' , this.PackageDetails.get('BusinessName').value);

  formData.append('package_type_id' ,   this.PackageArray),
  formData.append('package_list_id',this.PacageListArray),
  formData.append('budget',this.customPayArr),
  formData.append('is_manual',this.CheckAutoPayArr),
  // tslint:disable-next-line:max-line-length
  formData.append('full_package',this.PackageDetails.get('totalPackageFee_cur').value + ' ' + this.PackageDetails.get('totalPackageFee').value),
  formData.append('signUpAmount',this.PackageDetails.get('signUpAmount_cur').value + ' ' + this.PackageDetails.get('signUpAmount').value),
  formData.append('StartDate',this.PackageDetails.get('StartDate').value),
  formData.append('endDate' , ProjectendDate),
  formData.append('project_hours', this.PackageDetails.get('project_hours').value),
  formData.append('technology_used', this.PackageDetails.get('technology_used').value),
  formData.append('attach_file', this.PackageDetails.get('attach_file').value)

  console.log(formData);

  this.rest.newProposals(formData , token).subscribe(result => {
    console.log(result);
  });

Servie.ts 文件

 newProposals(value : FormData , token) {
   value.forEach(value => console.log(value));
   let headers = new HttpHeaders();
   headers = headers.append('Content-Type', 'application/json; charset=utf-8');
   headers = headers.append('Authorization', token);
   return this.http.post<any>(this.addProposals , value , {headers});
  }

问题是>>

我的表单数据在服务器上变为 Null，我将通过 post 方法发送这些数据

【问题讨论】：

什么是FormData？

标签： angular angular6 angular5 angular-httpclient angular-http

【解决方案1】：

您不能直接将 FormData 打印到 console.log()，您需要使用 get()、getAll() 等 formdata 的方法...对于您的用例，您可以使用 .forEach() 数组方法来遍历所有值并获取要在 console.log 中打印的数据。完整的工作示例可以在这里找到..StackBlitz Link

这是你的实现..

const formData  = new FormData();

formData.append('proposal_details' , 'proposal_details');
formData.append('businessName' ,'BusinessName');

console.log(formData.getAll('businessName')); // using .getAll() method.

formData.forEach(data =>{ // using forEach array method.
    console.log(data); // logs data here.
})

【讨论】：

【解决方案2】：

将常量类型从headers = headers.append('Content-Type', 'application/json; charset=utf-8'); 更改为

headers = headers.append('Content-Type', 'application/x-www-form-urlencoded'); in service file

更正Service.ts文件

 newProposals(value , token) {
       let headers = new HttpHeaders();
       headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
       headers = headers.append('Authorization', token);
       return this.http.post<any>(this.addProposals , value , {headers});
      }

【讨论】：