Sending a multiple body(text and file ) in post request Vue.js_+Node.js app

Hello developers I'm in a very early stage of this app trying to build a signup form incluiding photos upload . I'm using Vue and in the back end Node.js+Express.

Trying to set this on vue i first v-model all the data i want to pass in my html template , including het text and files:

<template>
  <ion-content>
    <form @submit.prevent="signUpUserFront()">
      <ion-item>
        <ion-label position="floating">Your Image</ion-label>
        <ion-input v-model="image" type="file"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="floating">Your name</ion-label>
        <ion-input v-model="name" type="text" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="floating">Your nickname</ion-label>
        <ion-input v-model="nickname" type="text" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="floating">Your email</ion-label>
        <ion-input v-model="email" type="email" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="floating">Your password</ion-label>
        <ion-input v-model="password" type="password" required></ion-input>
      </ion-item>

      <ion-grid>
        <ion-row justify-content-center>
          <ion-col size="12">
            <div class="ion-text-center">
              <ion-button type="submit"> Ok </ion-button>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  
  </ion-content>
</template>

then on my script i establish first that data to v-model, and the then method that would trigger the process:

import { mapActions } from "vuex"; //importando las accione de vuex
import { IonLabel, IonInput, IonItem, IonRow, IonCol } from "@ionic/vue";

export default {
  name: "SignUpComponent",
  components: { IonLabel, IonInput, IonItem, IonRow, IonCol },
  data() {
    return {
      name: "",
      password: "",
      nickname: "",
      email: "",
      image: "",
   };
  },

  methods: {
    ...mapActions(["signUpUser"]),

    signUpUserFront() {
      return this.$store.dispatch("signUpUser", {
        name: this.name,
        nickname: this.nickname,
        password: this.password,
        email: this.email,
        role: "USER_ROLE",
        image: this.image,
      });
    },

   
  },
};
</script>

Then on my Vue state managment(vuex) i set all the logic that fetch the endpoint (post) in charge of setting this on the database once the user is signed:

 signUpUser({ commit,dispatch }, payload) {
      console.log(payload);
      const body = {
        nickname: payload.nickname,
        password: payload.password,
        email: payload.email,
        name:payload.name,
        image:payload.image,
        role:payload.role
      };
     
      fetch(`${urlUser}/create/user`, {
        credentials: "include",
        headers: {
          "Content-Type": "multipart/form-data",
          "Access-Control-Allow-Origin": "http://localhost:8100",
        },
        method: "POST",
        body:JSON.stringify(body)
      })
        .then((result) => {
          return result.json();
        })
        .then((result) => {
          console.log(result);
        })
        .catch((err) => {
          console.log(err);
        });
    },

When I try to use the form data it doesn't work for this fetch Api. How could I improve this code in order to be able to upload in same file both image and json data?

Read more here: https://stackoverflow.com/questions/67012522/sending-a-multiple-bodytext-and-file-in-post-request-vue-js-node-js-app