How to send json parameter and multipart/form-data file in one request with vue

Question

How to send json parameter and multipart/form-data file in one request with vue, just as postman does?

I've searched how to submit "multipart/form-data" from VueJs . What I want is image file in multipart format, and other parameters in one json object(content-type is json). All the parameters are sent as a single http request.

The main difference is how to send json parameters and multipart file in a single http post request?

Possible duplicate of [how to submit "multipart/form-data" from VueJs](https://stackoverflow.com/questions/43574869/how-to-submit-multipart-form-data-from-vuejs) — MartenCatcher, Nov 07 '19 at 15:18
@MartenCatcher I've searched that question. I want image file in multipart format, and other parameters in json. All the parameters are sent as a single http request. — user7328234, Nov 07 '19 at 15:23
@user7328234 you can't send multipart and json in a single request, that won't work. It's easier to add your parameters to the multipart request — Ayrton, Nov 07 '19 at 15:46

score 1 · Answer 1 · answered Nov 07 '19 at 20:33

First of all, this is not a vue related question. There is a solution in this answer though. Another solution (if content-type in request is not a priority) would be to use simple FormData. You can easily insert your image and send the json as a plaintext. This would however require additional parsing / mapping to your model at server side.

score 0 · Answer 2 · answered Oct 19 '20 at 19:14

i have also faced the same issue and i would like to share what i did. I am trying to upload image,kind, name and eventID.

let logo1 = new FormData
logo1.append('image', this.logo1)
logo1.append('kind', 'logo1')
logo1.append('name', this.$refs.logo1.files[0].name )
logo1.append('eventID',eventID)


axios.post(`/upload`, logo1,
            
   {
      headers:{
          'Authorization' : `${token}`,
          'Content-Type': `multipart/form-data; boundary=${logo1._boundary}` 
  },    

  }).then((res) => {

     console.log(res)


  }).catch((error) => {

    console.log(error)

  })

Note: The postdata param format should be (url , FormData) and not (url, {data: FormData})

How to send json parameter and multipart/form-data file in one request with vue

2 Answers2