Image upload in Nuxt.js using axios

Question

I've tried almost every answer in relative questions, and couldn't find any solution to my case.

I'm new to Nuxt.JS, and I'm moving my project from Vue/CLI to Nuxt.js, now I'm stuck in sending POST request which contains images and data (FormData). The FormData is appearing empty on the server side (Node.js)

The current working version of my code in Vue CLI:

const requestOptions = {
        method: 'POST',
        body: formData
    };

return fetch(`/create`, requestOptions).then(handleResponse);

What I'm trying to achieve in Nuxt.JS (which is not working properly) by using nuxt/axios module:

methods: {
 async sendRequest(){
    let formData = new FormData();
    formData.append('image',this.myFile);
    formData.append('name',this.anyName);
    var res = await this.$axios.$post('/create', formData);
  }
}

EDIT: I tried to log the content before making the request like:

for (var pair of formData.entries()) {
            console.log(pair[0]+ ' - ' + pair[1]);
}

And I can see the fields and values clearly as intended.

I've tried adding headers to the request:

this.$axios.$post('/create', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })

But still getting: {} in Node.js while printing the request body.

What I'm doing wrong?

Image upload in Nuxt.js using axios

0 Answers