Uploading Multiple Files in Vue.js using a Laravel API

Recently l wanted to upload documents from Vue.js to a Laravel backend. All API's were set up and were working in Postman. Doing in vue.js was a bit of a problem. l was using Vuetify for the styling so l used a v-file-input set to multiple using the predefined prop.

On upload, l was using Axios. Basic stuff. To attach documents l created an instance of FormData() and appended the documents formData.append('images[]', this.images).

In my controller in Laravel, l was looping over the array of images and storing them:

foreach($request->file('images') as $image){
  $image->store('docs');
}

This implementation failed and l did alot of modifications and turns out l had to loop over the documents also in Vue.js like this:

this.images.foreach((image, index) => { formData.append('images[]', image) });

This finally worked and l hope it works for you too!