Uploading files with VueJS, axios and Laravel

Question

Hello I am building one project. Where user can send up to 5 images and up to 10 songs with the text. But when I send request to the server, where I handle with Laravel, I can't get those files.

// my data object from VueJS
data() {
  return {
    formData: new FormData(),
    pikir: {
      body: '',
    },
    isLoading: false,
    images: [],
    songs: [],
  }
}

// imagePreview method from VuejS
imagePreview(event) {
  let input = event.target;
  if (input.files[0]) {
    if (input.files.length <= 5) {
      
      for (let i = 0; i < input.files.length; i++) {
        let reader = new FileReader();

        reader.onload = e => {
          this.images.push(e.target.result);
        }

        reader.readAsDataURL(input.files[i]);
      }
      
      Array.from(Array(event.target.files.length).keys())
        .map(x => {
        
          this.formData
            .append('images',
              event.target.files[x], event.target.files[x].name);
          
      });
      
    } else {
      alert('You can upload up to 5 images');
    }
  }
}

// musicPreview method from VueJS
musicPreview(event) {
  let input = event.target;
  if (input.files.length <= 5) {
    for (let i = 0; i < input.files.length; i++) {
      this.songs.push(input.files[i].name.replace('.mp3', ''));
    }
     
    Array.from(Array(event.target.files.length).keys())
      .map(x => {

        this.formData
          .append('songs',
            event.target.files[x], event.target.files[x].name);

    });
    
  } else {
    alert('You can upload up to 10 songs');
  }
}

// sharePikir method from VueJS
sharePikir() {
  this.formData.append('body', this.pikir.body);
  
  axios.put('/api/pikirler', this.formData)
    .then(response => {
      this.pikir.body = '';
      this.isLoading = false;
    })
    .catch(() => {
      this.isLoading = false;
    });
},

<form action="#" id="share-pikir">
  <label for="pikir">
    Näme paýlaşmak isleýärsiňiz? {{ pikirSymbolLimit }}
  </label>
  
  <input type="text" name="pikir" id="pikir" maxlength="255"
    v-model="pikir.body"
    @keyup="handleSymbolLimit()">

  <div class="emoji">
      <a href="#"><i class="fa fa-smile-o"></i> </a>
  </div>

  <div class="photo-music left">
    <label for="music-upload">
      <i class="fa fa-music"></i>
    </label>
      
     <input type="file" name="songs[]" id="music-upload" 
      accept="audio/mp3"
      @change="musicPreview($event)"
      multiple>
      
      <i class="divider"></i>
     
      <label for="image-upload">
        <i class="fa fa-image"></i>
      </label>
      
     <input type="file" name="images[]" id="image-upload" 
      @change="imagePreview($event)"
      multiple>
      
  </div>

  <div class="share right">
  
    <button
      :class="{ 'btn-medium': true, 'is-loading': isLoading }"
      @click.prevent="sharePikir($event)">
      Paýlaşmak
    </button>
    
  </div>
  
</form>

I put my front end stuff above and in my Laravel side I just return all requests:

public function store(){
    return request()->all();
}

And these are what I get from request:

I couldn't found what is wrong. Thank you in advance.

Solution 1

Oh yeah! you're missing this part. You need to define this.

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

Solution 2

this my solutuion

export default {
    data (){
        return {
            attachment : { name : null,file: null }
        }
    },
    methods : {
        onFileChange(event) {
            this.attachment.file = event.target.files[0]
        },
        attachmentCreate() {
            var form = new FormData();

            form.append('name',this.attachment.name);
            form.append('file',this.attachment.file);
            this.$http.post('attachment',form).then(response=>{
               console.log("oke")
            })
        },
    }
 }

<input type="file" class="form-control" @change="onFileChange">