2

I've custom vuex store action to send data to API server:

updateAvatar({commit, dispatch}, data) {
  return this.$axios.put(`/users/${this.$auth.user.id}/logo`, data)
}

Here is I sent request to server:

let data = new FormData()
let blob = this.$toBlob(imgDataUrl)
data.set('key', 'value')
data.append('avatar', blob, 'avatar.png')

this.$store.dispatch('user/updateAvatar', data)

But when I check request on API server then request no has any fields.

How I can send correctly request with fields and file?

Andreas Hunter
  • 4,504
  • 11
  • 65
  • 125
  • i woul use `POST` request. Then you need to add in the header `application: "multipart-form-data"`. On the backend its good to google about `multer` – bill.gates Jun 17 '20 at 07:17
  • @Ifaruki nope, don't add the header. The browser handles `FormData` post bodies for you and sets the appropriate headers, including the require mime-boundary – Phil Jun 17 '20 at 07:46
  • Looks ok from the client-side (except we have no idea what `$toBlob` does). What does your server-side code look like? – Phil Jun 17 '20 at 07:48
  • [Here](https://stackoverflow.com/a/12300351/7496039) is content of `$toBlob` method @Phil – Andreas Hunter Jun 17 '20 at 09:10
  • When I tried with `POST` method works but with `PUT` doesn't work. Why? @Ifaruki – Andreas Hunter Jun 17 '20 at 09:18
  • how does your API endpoint looks like? – bill.gates Jun 17 '20 at 09:18
  • You must send the media file separately from the text data. Go to my blog and you will find an example of how to upload images to server using Nuxt/axios – Billal Begueradj Jun 17 '20 at 09:30
  • I endpoit method is `PUT` and looks like this `/api/users/{id}/avatar`. I use Laravel in my server app. @Ifaruki – Andreas Hunter Jun 17 '20 at 15:05

0 Answers0