How to send by form an image in http request, and with what headers?

I searched on google and nothing...

i have a form in my view on vueJS :

  <form @submit.prevent="avatar()" method="POST" enctype="multipart/form-data">
    <input type="file" name="profilePicture" id="profilepicture" >
    <button type="submit">Valider mon avatar?</button>
  </form>

The user send an image.

My question is,
i want to send the image (sending by user with the form) in a function, and this function send the image to Http Request in headers ...

the api request begin with :

app.post('/myupload/:iduser', async (req, res) => {
    try{
        var { iduser } = req.params ;
        const { image } = req.file ;
        [...]

my function in my view on vuejs is actually :

async function avatar() {

    console.log(document.getElementById("profilepicture").value);
    // for having the image sending src

    let response = await fetch(`http://localhost:196/myupload/${MyTokenStore.myid}`, {
      method: "POST",
      headers: {
      "Content-Type": "multipart/form-data",
      },
  
      body: JSON.stringify(document.getElementById("profilepicture").value)
    })
      .then((response) => response.json())
      .catch((error) => {
      console.log("Failed", error)
      });
  
    if(response.error){
      alert(response.message);
      return
    }
  }

But the only parameter i make in request is the string of the src image, and the error servor is :

TypeError: Cannot destructure property 'image' of 'req.files' as it is undefined.

Please, i need help, the request run when I go directly to the url of the request (but the browser directly displays the server response):

  <form :action="`http://localhost:196/myupload/${MyTokenStore.myid}`" 
   method="POST" enctype="multipart/form-data">
    <input type="file" name="image"/>
    <button type="submit">Valider mon avatar</button>
  </form>

but I fail to put it in a function...

thank you.

To send an image from Vue doing a request you have to use a FormData object. For example:

   /**
   * @description - register user
   */
  const register = async () => {
    try {
      const fd = new FormData();

      Object.keys(user.value).forEach((key) => {
        fd.append(key, user.value[key]);
      });

      const res = await axios.post('/register', fd, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      toast.success(res.data);
    } catch (err) {
      console.log(err);
      toast.error(err.response.data);
    }
  };

In the previous code, in register I'm using a FormData to send the user object to the backend. Previously, you should set it. I made it like the following example:

const setProfileImage = (e) => {
 image_preview.value = URL.createObjectURL(e.target.files[0]);
 document.getElementById('image_preview').style.height = '150px';
 document.getElementById('image_preview').style.width = '150px';
 user.value.profile_image = e.target.files[0]; // this is important for you.
 user.value.image = e.target.files[0].name;
};

setProfileImage is receiving an event from an Input file. If you see the comment I write in the code, user.value.profile_image = e.target.files[0] is the entire file. The rest is to display the image and send the name to store into the database.

       <div class="mb-3">
      <label
          for="profile_image"
          class="bg-primary text-white rounded-3 text-center w-100 p-2 profile_image"
      >
        Seleccione su foto de perfil <i class="ps-1 bi bi-card-image"></i>
      </label>
      <input
          type="file"
          class="form-control d-none"
          id="profile_image"
          placeholder="Adjunte su foto de perfil"
          @change="setProfileImage"
      />
    </div>

This is the Input file what I was talking. The event is an @change to catch correctly the file.

Hope it works for you.