0

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>

1 Answer 1

1

you can try adding content-type to your header for axios before sending post request.

      "Content-Type": "multipart/form-data; boundary=----",
    },
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.