Búsqueda de sitios web

javascript - ¿Cómo transformar un formulario reactivo normal en un formulario multipart?


Estoy tratando de subir un bloque de datos (cadena, número, archivo, booleano) a una API. Ahora, la documentación dice que no es un JSON sino un esquema multipart. Dado que la API no aceptó la imagen con el formulario normal, necesitaría el formulario multipart para subir mis datos, ¿verdad? Ahora tengo un problema al transformar mi formulario normal a un formulario multipart. Lo busqué en Internet pero no encontré en ningún lugar este enfoque. Ya intenté hacerlo de alguna manera pero falló completamente :( Además, hay una dificultad donde necesito llamar a mi archivo desde el almacenamiento local (todas estas cosas funcionaban en mi formulario normal). Tampoco sabría exactamente cómo cambiar mi HTML para adaptarlo al nuevo formulario multipart.

html (con configuración de un formulario normal => ¿puedo mantener eso?):

  <form [formGroup]="categoryForm">

<ion-item>
         <ion-icon name="images"></ion-icon>
                <ion-checkbox formControlName="lock"></ion-checkbox>
 </ion-item>


    <ion-item>
      <ion-input [disabled]="tagList?.length > 0" formControlName="category"  name="tagValue"></ion-input>
      <ion-button (click)="addVal()" [disabled]="!categoryForm.valid || tagList?.length > 0">

    </ion-button>
    </ion-item>
</form> 
<ion-button (click)="apiSubmit()">POST</ion-button>
</ion-content>

TS (primero mi forma normal de trabajo, luego mi multipart fallido:

ngOnInit() {

    this.storage.get('image_data').then((imageFile) => {
      console.log(imageFile)
      this.categoryForm.patchValue({
        image: this.storage.get('image_data')
      });

      this.storage.get('when').then((Data) => {
        this.categoryForm.patchValue({
          when: this.storage.get('when')
        });
      });

    });

    this.categoryForm = new FormGroup({

      'lock': new FormControl(true),

      'category': new FormControl('', Validators.compose([
        Validators.maxLength(25),
        Validators.minLength(1),
        Validators.required
      ])),
      image: new FormControl(null),
      when: new FormControl(null),
    });


    const payload = new FormData();
    this.storage.get('image_data').then((imageFile) => {
      console.log(imageFile);
      this.payload.patchValue({
        image: this.storage.get('image_data')
      });
      payload.append('image': image) // stored retrieved file
      payload.append('category': category) // input string
      payload.append('lock': lock) // bool
      payload.append('when': when) // stored retrieved number (same principle as image)
}