Angular 使用 Multipart/FormData 请求 POST - 错误

Question

I have to upload with a Post a file, but I never have did it. I try this way, in debug I can see the FormBuilder getting the value of the upload, but I don't know if this way it's correct. I search in many documents, but I can't get it. I want to do this with a FormGroup, but just sending the file and the values for URL it's good for me.

edit-student.component.html

  <form [formGroup]="billsForm" (ngSubmit)="onSubmit()">
            <br>
            <mat-accordion>
                <mat-expansion-panel hideToggle *ngFor="let month of months">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            <select class="selectMonth" formControlName="month">
                                <option *ngFor="let month of months" [value]="month.value">
                                    {{month.viewValue}}
                                </option>
                            </select>

                        </mat-panel-title>
                        <mat-panel-description>
                            Boleto do mês de {{month.viewValue}}
                        </mat-panel-description>
                    </mat-expansion-panel-header>
                    <input formControlName="upload" id="uploadB" class="uploadBoleto" type="file"
                        accept="application/pdf"><br>
                    <input class="uploadBoleto" type="submit" value="Enviar">
                </mat-expansion-panel>
            </mat-accordion>
</form>

edit-student.component.ts

ngOnInit(): void {
    this.billsForm = this.fbills.group({
      _id: [this.student.datakey._id],
      course: [this.student.datakey.course],
      sYear: [this.student.datakey.sYear],
      month: [],
      upload: [],
    })
  }

onSubmit() {
  debugger
  return this.editService.upload(this.billsForm.value).then((result:any)=>{
    console.log('sucess')
  }).catch((error:any)=>{
    console.log(error)
  });
 
}

edit-student.service.ts

upload(bill:BillsModel) {
      debugger
      let headerGet = new HttpHeaders();
      let formData = new FormData();
      let key = String(bill._id);
      formData.append(key, bill.upload);
      headerGet = headerGet.append('enctype', 'multipart/form-data');
      headerGet = headerGet.append('key', this.user.token);
      const requestOptions = {                                                                                                                                                                                 
          headers: headerGet, 
        };
      return new Promise ((resolve, reject)=>{
        const url = this.config.API_URL + '/bills/create/' + bill.course + '/' + bill.sYear + '/' + bill.month + '/' + bill._id;
        console.log(url);
        this.http.post<any>( url, formData, requestOptions).subscribe((result:any)=>{
          resolve(result);
         }, (error)=>{
        reject(error)
        })
      })
    }

bills.model.ts

export class BillsModel{
    _id: number;
    sYear: number;
    month: number;
    status: string;
    course: string;
    upload: any;
}

Answer 1

This is an example of how to upload a file with angular service:

 public uploadFile(body: any, id: string): Observable<any>{
    const formData = new FormData();
    formData.append('file', body);
    return this.httpClient.post<any>(config.serviceBaseUrl + '/file/save/'+id, formData,);
  }