POST Image which store as a Blob with Axios - VUEJS
19,906
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)
})
}
Author by
KitKit
Updated on June 19, 2022Comments
-
KitKit almost 2 years
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.
<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>