close

[Solved] How to post a file from a form with Axios

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error How to post a file from a form with Axios in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error

How to post a file from a form with Axios error occurs?

Today I get the following error How to post a file from a form with Axios in javascript.

How To Solve post a file from a form with Axios Error ?

  1. How To Solve post a file from a form with Axios Error ?

    To Solve post a file from a form with Axios Error If you don't want to use a FormData object (e.g. your API takes specific content-type signatures and multipart/formdata isn't one of them) then you can do this instead:

  2. How to post a file from a form with Axios

    To Solve post a file from a form with Axios Error If you don't want to use a FormData object (e.g. your API takes specific content-type signatures and multipart/formdata isn't one of them) then you can do this instead:

Solution 1

Add the file to a formData object, and set the Content-Type header to multipart/form-data.

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Solution 2


If you don’t want to use a FormData object (e.g. your API takes specific content-type signatures and multipart/formdata isn’t one of them) then you can do this instead:

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment