how to upload file with title and description using vuex and laravel - vuejs2

Question

i have a section in my project where i can upload a post with image
i tried this but it's returning a 419 status
vue script:
<script>
export default {
data() {
return{
post: {
title: '',
description: '',
},
file: '',
name: '',
}
},
methods: {
onChange(e){
this.file = e.target.files[0];
},
createPost(e){
e.preventDefault();
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
let data = new FormData();
data.append('file', this.file);
this.$store.dispatch('createPost', this.post, data, config);
}
}
}
</script>
vuex store's actions:
createPost({}, post, data, config){
axios.post('api/createPost',{
title: post.title,
description: post.description
}, data , config ).then(res => {
console.log(res);
}).catch(err =>{
console.log(err);
})
}
i'm gettinh this error:
POST http://127.0.0.1:8000/dashboard/api/createPost 419 (unknown status)

Answer 1

i figured it out
the script should've been like this :
<script>
export default {
data() {
return{
post: {
title: '',
description: '',
},
file: '',
}
},
methods: {
onChange(e){
this.file = e.target.files[0];
},
createPost(e){
e.preventDefault();
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
let data = new FormData();
data.append('file', this.file);
data.append('title', this.post.title);
data.append('description', this.post.description);
this.$store.dispatch('createPost', data, config);
}
}
}
</script>
and the vuex file should've containe this :
createPost({}, data, config){
axios.post('/api/createPost', data , config ).then(res => {
console.log(res);
}).catch(err =>{
console.error(err);
})
}