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:

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

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

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

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

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

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

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: {

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


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) {
      const body = {
        nickname: payload.nickname,
        password: payload.password,
      fetch(`${urlUser}/create/user`, {
        credentials: "include",
        headers: {
          "Content-Type": "multipart/form-data",
          "Access-Control-Allow-Origin": "http://localhost:8100",
        method: "POST",
        .then((result) => {
          return result.json();
        .then((result) => {
        .catch((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:

Content Attribution

This content was originally published by Enrique GF at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: