WriteFindPost.vue

<template>
  <v-container fill-height fluid grid-list-xl>
    <v-layout justify-center wrap>
      <v-flex xs12 md8>
        <material-card color="green" title="발견 게시글 작성" text="게시글 작성을 위한 정보를 입력해 주세요.">
          <v-form>
            <v-container py-0>
              <v-layout column wrap>
                <!-- <v-flex xs12 md4>
                  <v-text-field label="글 제목" v-model="findpost.title"/>
                </v-flex> -->
                <v-flex xs12 md12>
                  <v-text-field label="반려견 견종" v-model="petType" class="purple-input"/>
                </v-flex>
                <v-flex xs12 md12>
                  <v-text-field label="발견장소" v-model="findPlace" class="purple-input"/>
                </v-flex>
                <v-flex xs12 md12>
                  <v-text-field label="발견 날짜" v-model="findDate" class="purple-input"/>
                </v-flex>
                <v-flex xs12 md12>
                  <v-textarea label="내용" v-model="body" class="purple-input" />
                </v-flex>
                <v-flex xs12 md12>
                  <file-input label="File input"></file-input>
                  <input type="file" label="photo input" @change="fileSeleted">
                  <v-btn color="green" @click="sendFile">Send</v-btn>
                </v-flex>
                <v-flex xs12 text-xs-right>
                  <v-btn class="mx-0 font-weight-light" color="success" @click="onClicked">작성 완료</v-btn>
                </v-flex>
              </v-layout>
            </v-container>
          </v-form>
        </material-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data(){
        return{
            file:'',
            body: '',
            created: '',
            petType: '',
            findPlace: '',
            findDate: '',
            date: new Date().toISOString().substr(0, 10),
            menu: false,
            modal: false,
            menu2: false,
            image:null
        }
    },
    methods: {
      onClicked: function(){
        var formData=new FormData();
        var config={
            header:{'Content-Type': 'multipart/form-data'}
        };
        formData.append('img',this.file);
        formData.append('body',this.body);
        formData.append('petType',this.petType);
        formData.append('findPlace',this.findPlace);
        formData.append('findDate',this.findDate);
        formData.append('image',this.image);
        for(let key of formData.entries()){
            console.log(`${key}`);
        }
        this.$http.post('/finderboard',formData,config).then((response) => {
            alert(response.data.message);
            this.$router.push('/finderboard')
        }).catch((err) => {
            alert("Error = "+err.message)
        })
      },
      fileSeleted: function(event){
          alert("here is fileSelected")
          this.file=event.target.files[0];
      },
      sendFile: function(){
        alert("here is send!!")

        var formData = new FormData();
        var config={
                header:{'Content-Type': 'multipart/form-data'}
        };
        formData.append('img',this.file);
        for(let key of formData.entries()){
                console.log(`${key}`);
        }
        this.$http.post('/finderboard/image',formData,config).then((respose)=>{
          alert("=== "+respose.data.msg)
        }).catch((err)=>{
          alert(err.message);
        })
      }
  }
}
</script>