Я пытаюсь загрузить свое изображение, чтобы оно попало в мой API, дело в том, что проверка должна оставаться на странице после того, как они вошли в систему. Он работает с загрузкой через почтальона, когда я пытаюсь сделать это в интерфейс моего кода Vue — нет.
Если кто-то знает, как я могу изменить этот код, чтобы он работал, сообщите мне.
<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.info("headers: {'Authorization': 'Bearer '" + this.$store.state.token);
console.info(response);
})
}
}
}
</script>
<style>
.red-text {
color: red;
font-size: 20px;
text-align: center;
}
</style>


вы можете попробовать добавить тип контента в свой заголовок для аксиом перед отправкой почтового запроса.
"Content-Type": "multipart/form-data; boundary=----",
},