在服务器上发送表单数据时遇到问题

Question

• 我正在研究角度
• 我试图通过表单数据将文件与数据一起发送的位置
• 但是当我将表单数据发送到服务器时，它正在发送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});
  }

**

问题是>>

**

我的表单数据在服务器上为空我想通过后方法发送给我

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

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