POST Image which store as a Blob with Axios - VUEJ

Question

I have a data Image which store as a Blob but I dont know how to post it with Axios, I use VUEJS. Please help me.

My Object API by VueDevtool

<file-upload v-model="files"></file-upload>
<button type="submit" v-on:click.prevent="Submit">Submit</button>

<script>
  methods: {
    data: function () {
      return {
        config: {
          'headers': {'Authorization': 'JWT ' + this.$store.state.token},
          'Content-Type': 'multipart/form-data'
        }
    },
    methods:{
      for (var file in this.files) {
        let data = new FormData()
        data.append('image', this.file[0])
        data.append('caption', 'image')
        data.append('user', this.Authuser)
        api.post('/photos/create/', data, this.config)
      }
    }
  }
</script>

Answer 1

You are almost there. The only thing you need is to append the actual file and you should pass $event to your function as: Submit($event)

Submit(event) {
  let URL = '....'

  let data = new FormData()

  data.append('name', 'image')
  data.append('file', event.target.files[0])

  let config = {
    header : {
      'Content-Type' : 'multipart/form-data'
    }
  }

  axios.post(URL, data, config).then(response => {
    console.log('response', response)
  }).catch(error => {
    console.log('error', error)
  })
}