How to upload my image file with my token, Vue JS - image

Question

I'm trying to upload my image so that it goes to my API, the thing is the validation needs to stay on the page, after they have logged in. It works with the upload through postman, by when i try to do it in the frontend of my Vue code it doesn't.
If someone knows how I can change this code to make it work, please let me know.
<template>
<v-app id="inspire">
<v-content>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="green">
<v-toolbar-title>Upload Images</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn slot="activator" icon large href="https://codepen.io/johnjleider/pen/wyYVVj" target="_blank">
<v-icon large>mdi-codepen</v-icon>
</v-btn>
</v-toolbar>
<v-card-text>
<v-form class="upload" #keydown.enter="addImage" method="post">
<v-text-field v-model="uploadImage.title" prepend-icon="title" id="title" name="title" label="Image Title" type="text"></v-text-field>
<v-text-field v-model="uploadImage.description" id="description" prepend-icon="description" name="description" label="Description" type="text"></v-text-field>
<v-text-field v-model="uploadImage.album_path" id="ablum_path" prepend-icon="photo_album" name="album_path" label="Choose an album" type="search"></v-text-field>
<input #change="onFileSelected" type="file" name="image" id="image">
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn v-on:click="addImage" type="submit" color="green white--text">Upload</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-content>
</v-app>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
feedback: null,
selectedFile: null,
uploadImage: [
{ title: '' },
{ description: '' },
{ album_path: '' },
{image: null}
]
}
},
methods:{
addImage() {
axios.post('/api/image/upload',
{
'title': this.uploadImage.title,
'description': this.uploadImage.description,
'album_path': this.uploadImage.album_path,
'image': this.selectedFile,
},
{ headers: { 'Authorization': 'Bearer ' + this.$store.state.token }
})
.then(response => {
console.log("headers: {'Authorization': 'Bearer '" + this.$store.state.token);
console.log(response);
})
}
}
}
</script>
<style>
.red-text {
color: red;
font-size: 20px;
text-align: center;
}
</style>

Answer 1

you can try adding content-type to your header for axios before sending post request.
"Content-Type": "multipart/form-data; boundary=----",
},