Multi part upload Angular

i m having a problem doing the signup of a user and uploading an image with it this is my function my register.component.ts

onSubmit() {

const formData: FormData = new FormData();
formData.append('body', this.registerForm.value);
formData.append('file', this.logo, this.logo.name);

//this.http.post("file", formData)
console.log(this.registerForm.value);
// Display the values

this.http.post(`${environment.apiUrl}/users/process_register`, formData).subscribe(
(res) => console.log(res),
(err) => console.log(err)
);
}

handleLogoFileInput(files: FileList) {
this.logo = files[0];
}

this is my component html file where i have my form

<form #registerForm="ngForm" novalidate  (ngSubmit)="onSubmit()">
  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #username="ngModel" name="username"/>
    <span>{{ 'user.username' | translate }}</span>
    <div *ngIf="!username.valid && registerForm.submitted" class="invalid-tooltip">Username is required!</div>
  </label>
  <label class="form-group has-float-label">
    <input class="form-control" required email ngModel #email="ngModel" name="email"/>
    <span>{{ 'user.email' | translate }}</span>
    <div *ngIf="!email.valid && registerForm.submitted" class="invalid-tooltip">Email is required!</div>
    <div *ngIf="email?.errors?.email && registerForm.submitted" class="invalid-tooltip">Email must be a valid address!</div>
  </label>
  <label class="form-group has-float-label">
    <input class="form-control" type="password" placeholder="" required ngModel #password="ngModel" name="password"/>
    <span>{{ 'user.password' | translate }}</span>
    <div *ngIf="!password.valid && registerForm.submitted" class="invalid-tooltip">Password is required!</div>
  </label>
  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #phone="ngModel" name="phone"/>
    <span>{{ 'Phone' | translate }}</span>
    <div *ngIf="!phone.valid && registerForm.submitted" class="invalid-tooltip">Phone is required!</div>
  </label>

  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #name="ngModel" name="name"/>
    <span>{{ 'Name' | translate }}</span>
    <div *ngIf="!name.valid && registerForm.submitted" class="invalid-tooltip">Name is required!</div>
  </label>     
  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #lastname="ngModel" name="lastname"/>
    <span>{{ 'Lastname' | translate }}</span>
    <div *ngIf="!lastname.valid && registerForm.submitted" class="invalid-tooltip">LastName is required!</div>
  </label>   
 
  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #address="ngModel" name="address"/>
    <span>{{ 'Address' | translate }}</span>
    <div *ngIf="!address.valid && registerForm.submitted" class="invalid-tooltip">Address is required!</div>
  </label>   
  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #about="ngModel" name="about"/>
    <span>{{ 'About' | translate }}</span>
    <div *ngIf="!about.valid && registerForm.submitted" class="invalid-tooltip">About is required!</div>
  </label>    
  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #datedeNaissance="ngModel" name="datedeNaissance"/>
    <span>{{ 'Year of birth' | translate }}</span>
    <div *ngIf="!datedeNaissance.valid && registerForm.submitted" class="invalid-tooltip">Year of birth is required!</div>
  </label>   
  <label class="form-group has-float-label">
    <input class="form-control" required ngModel #businessTitle="ngModel" name="businessTitle"/>
    <span>{{ 'Buissness title' | translate }}</span>
    <div *ngIf="!businessTitle.valid && registerForm.submitted" class="invalid-tooltip">Title is required!</div>
  </label>   
  <div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">Upload</span></div>
  <div class="custom-file"><input type="file" id="inputGroupFile01" name="profile" (change)="handleLogoFileInput($event.target.files)" class="custom-file-input" >
    <label for="inputGroupFile01" class="custom-file-label">upload image</label></div></div>
  <div class="d-flex justify-content-between align-items-center">
    <a routerLink="/user/forgot-password">{{ 'user.forgot-password' | translate }}?</a>
    <app-state-button [btnClass]="'btn btn-primary btn-lg btn-shadow'" [currentState]="buttonState"
      [isDisabled]="buttonDisabled" click="onLoginClick()">
      {{ 'user.register-button' | translate | uppercase }}
    </app-state-button>

  </div>
</form >

and this is my backend controller

  @PostMapping("/process_register")
  @ApiOperation(value = "${UserController.register}")
  @ApiResponses(value = {//
  @ApiResponse(code = 400, message = "Something went wrong"), //
  @ApiResponse(code = 403, message = "Access denied"), //
  @ApiResponse(code = 422, message = "Username is already in use")})
  public String processRegister(@RequestPart("body") String body,
        @RequestPart("file") MultipartFile file)

i need to pass both of the file and body as a form-data but its not working i dont know what i m doing wrong and this is what i get this is the error and my response