Datei kann nicht auf Laravel Controller mit VueJS passieren

Question

ich ein einfaches Formular mit einem Datei-Upload und eine Texteingabe wie folgt:

<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> 

Auf eine Datei das Bild Auswahl der previewThumbnail Methode angesehen wird, verwendet wird.

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); 
}, 

in der Konsole erhalte ich die Dateidaten. Ich brauche dann diese Daten, die an den Laravel-Controller übergeben werden, aber die Dateidaten machen es nicht zur Submit-Funktion. Die folgende createStatus-Methode wird beim Senden des Formulars aufgerufen. Wenn Sie die Antwort zurückgeben, ist das an die URL übergebene newStatus.image leer.

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; 
    }); 
}, 

Habe ich etwas in der Submit-Funktion verpasst?

Answer 1

Sie haben die form nicht an die new FormData übergeben.

Wenn Sie den Ereignisparameter und verwenden Sie das Ziel (das Formular wird eingereicht) übergeben werden Sie Ihre 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; 
    }); 
},