Как загрузить мой файл изображения с моим токеном, Vue JS

Я пытаюсь загрузить свое изображение, чтобы оно попало в мой 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>
Применение градиента к изображению с помощью CSS
Применение градиента к изображению с помощью CSS
Здравствуйте, братья и сестры, как дела? Недавно я застрял на применении градиента к изображению. Я применял это много раз, но иногда наши требования...
Получение URL-адреса изображения курса в Moodle с помощью PHP
Получение URL-адреса изображения курса в Moodle с помощью PHP
Moodle - это популярная система управления обучением с открытым исходным кодом, используемая многими учебными заведениями и организациями по всему...
0
0
286
1

Ответы 1

вы можете попробовать добавить тип контента в свой заголовок для аксиом перед отправкой почтового запроса.

      "Content-Type": "multipart/form-data; boundary=----",
    },

Другие вопросы по теме