Angular 使用 Multipart/FormData 請求 POST - 錯誤

Question

我必須上傳一個 Post 文件，但我從來沒有這樣做過。 我嘗試這種方式，在調試中我可以看到 FormBuilder 獲取上傳的值，但我不知道這種方式是否正確。 我在很多文件中搜索，但我無法得到它。 我想使用 FormGroup 執行此操作，但僅發送文件和 URL 的值對我來說很好。

編輯-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>

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

編輯-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

這是如何使用 angular 服務上傳文件的示例：

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