Не удается передать файл в контроллер Laravel с VueJS

Question

У меня есть простой формы с загрузкой файла и ввода текста, как показано ниже:

<form v-on:submit.prevent="createStatus" method="post" enctype="multipart/form-data"> 

    <div class="Image-input__input-wrapper"> 
     <input @change="previewThumbnail" class="Image-input__input" name="thumbnail" type="file"> 
    </div> 
      <div v-bind:class="{'form-group': true, 'has-error': errors.description}"> 
       <label>Status Description:</label> 
       <input type="text" class="form-control" v-model="newStatus.description"> 
       <span class="help-block" v-for="error in errors.description">{{ error }}</span> 
      </div> 
      <div class="form-group"> 
       <button type="submit" class="btn btn-primary">Save New Status</button> 
       <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
      </div> 
     </form> 

При выборе файла изображения предварительного просмотра с помощью метода previewThumbnail.

previewThumbnail: function(event) { 
    var input = event.target; 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     var vm = this; 
     reader.onload = function(e) { 
      vm.imageSrc = e.target.result; 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
    console.log(input.files[0]); 
    this.newStatus.image = input.files[0]; 
    console.log(this.newStatus.image); 
}, 

В консоли я получаю данные файла. Затем мне нужно передать эти данные для отправки в контроллер laravel, но данные файла не попадают в функцию отправки. Метод createStatus, приведенный ниже, вызывается в форме submit, при возврате ответа newStatus.image, который был передан URL, пуст.

createStatus(){ 
    var formData = new FormData(); 
    formData.append('image', this.newStatus.image); 
    formData.append('description', this.newStatus.description); 
    axios.post('/api/statuses', formData).then(response => { 
     console.log(response.data); 
    }, response => { 
     this.formErrors = response.data; 
    }); 
}, 

Я пропустил что-то в функции отправки?

Answer 1

Вы не прошли form до new FormData.

Если передать параметр события и использовать мишень (форма представляется), вы получите ваши FormData

createStatus(e){ 
    var formData = new FormData(e.target); 
    formData.append('image', this.newStatus.image); 
    formData.append('description', this.newStatus.description); 
    axios.post('/api/statuses', formData).then(response => { 
     console.log(response.data); 
    }, response => { 
     this.formErrors = response.data; 
    }); 
},