Upload multiple images using laravel, vue and axios - laravel

Question

Files don't get uploaded when I hit the upload method.
I believe this issue is due to the axios interceptors 'cause when I make a new axios instance and set the headers to
headers: {'Authorization': 'Bearer ' + this.user.api_token }
it works like a charm.
Is there any way to get this to work without creating a new axios instance? 'cause I don't have access to the user object in my ImageUploader component?
ImageUploader.vue
<template>
<div>
<label for="file">Select a file</label>
<input type="file" id="file" #change="onInputChange" multiple>
</div>
<div class="upload-control" v-show="images.length">
<label for="file">Select a file</label>
<button #click="upload">Upload</button>
</div>
<template/>
<script>
export default {
data: () => ({
files: [],
images: []
}),
methods: {
onInputChange(e) {
const files = e.target.files;
Array.from(files).forEach(file => this.addImage(file));
},
addImage(file) {
if (!file.type.match('image.*')) {
this.$toastr.e(`${file.name} is not an image`);
return;
}
this.files.push(file);
const img = new Image(),
reader = new FileReader();
reader.onload = (e) => this.images.push(e.target.result);
reader.readAsDataURL(file);
},
upload() {
const formData = new FormData();
this.files.forEach(file => {
formData.append('images[]', file, file.name);
});
axios.post('/api/products', formData)
.then(response => {
this.images = [];
this.files = [];
})
},
},
}
App.vue
<script>
import SearchBar from "./SearchBar";
export default {
name: "App",
props: [
'user'
],
components: {
SearchBar
},
created() {
this.title = this.$route.meta.title;
window.axios.interceptors.request.use(config => {
if (config.method === "get") {
config.url = config.url + "?api_token=" + this.user.api_token;
} else {
config.data = {
...config.data,
api_token: this.user.api_token
};
}
return config;
});
},
}
</script>