<template>
<div>
<div>
<form @submit.prevent="addImage" enctype="multipart/form-data" class="pt-4">
<div>
<label class="block">
<span >Title</span>
<input type="text" v-model="image.title" placeholder="">
</label>
<div>
<input ref="fileInput" type="file">
</div>
<button type="submit" >Create</button>
</div>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
image: {},
file: '',
success: '',
}
},
methods: {
addImage() {
let existingObj = this;
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
let data = new FormData();
data.append('file', this.file);
data.append('title', this.image.title);
axios.post('/api/images', data, config)
.then(response => {
this.$router.push({name: 'images', params: {img_upload: 'success'}})
})
.catch(err => console.log(err))
},
}
}
</script>