Ionic 4 capacitor upload image to server

I have used the capacitor plugin to let user capture images and then we can store it in our server(spring).

async takePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Prompt, 
    });


    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));

    console.log(this.photo)
    console.log(image)

  }

Now , I want to store image with some other data like name, etc.

servie.ts

httpOptions2 = {
    headers: new HttpHeaders({ 'Content-Type': 'multipart/form-data' })
  };

addReport (user): Observable<any> {
    return this.http.post<any>(this.url , user,this.httpOptions2 )
  }

page.ts

let report = {
        address : this.address.value, // other data 
        image : this.photo,

      }
      console.log(report)

      this.reportService.addReport(report).subscribe(data =>{
        console.log(data)
      })

Input type at the server for the image is the file

I have set ‘Content-Type’: ‘multipart/form-data’.

But at the server-side image is not getting stored?

What am I doing wrong?

Getting following error on server

Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

Thank you in advance

You can try to pass a proper FormData object rather than your report one.
let formData: FormData = new FormData();

You can find explanations how to use Using FormData Objects here.
Note it is meant to convey binary content.