Как загрузить мой файл изображения с моим токеном Vue JS - PullRequest
Новая
       7

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

0 голосов
/ 13 февраля 2019

Я пытаюсь загрузить свое изображение, чтобы оно отправлялось в мой 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.log("headers: {'Authorization': 'Bearer '" + this.$store.state.token);
          console.log(response);
        })

        }
    }
}
</script>

<style>
.red-text {
  color: red;
  font-size: 20px;
  text-align: center;
}
</style>

1 Ответ

0 голосов
/ 14 февраля 2019

вы можете попробовать добавить content-type в ваш заголовок для axios перед отправкой почтового запроса. 

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