[Vuejs]-Capturing multiple image in Vue Js

Here is the working code for vuejs part – https://picupload.netlify.app/

https://github.com/manojkmishra/dw_take5/blob/master/src/components/ImageUploader.vue

Vue part

<template>
<div class="uploader"
    @dragenter="OnDragEnter"
    @dragleave="OnDragLeave"
    @dragover.prevent
    @drop="onDrop"
    :class="{ dragging: isDragging }">
    
    <div class="upload-control" v-show="images.length">
        <label for="file">Select files</label>
        <button @click="upload">Upload</button>
    </div>


    <div v-show="!images.length">
        <i class="fa fa-cloud-upload"></i>
        <p>Drag your images here</p><div>OR</div>
        <div class="file-input">
            <label for="file">Select files</label>
            <input type="file" id="file" @change="onInputChange" multiple>
        </div>
    </div>

    <div class="images-preview" v-show="images.length">
        <div class="img-wrapper" v-for="(image, index) in images" :key="index">
            <img :src="image" :alt="`Image Uplaoder ${index}`">
            <div class="details">
                <span class="name" v-text="files[index].name"></span>
                <span class="size" v-text="getFileSize(files[index].size)"> </span>
            </div>
        </div>
    </div>
<div v-show="images.length" class="progress">
    <div
        class="progress-bar progress-bar-info progress-bar-striped"
        role="progressbar"  :aria-valuenow="progress"
        aria-valuemin="0"   aria-valuemax="100"
        :style="{ width: progress + '%' }"
    >
    {{ progress}}%
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default 
{   data: () => ({ isDragging: false, dragCount: 0, files: [],images: []  ,progress:0}),
methods: {
    OnDragEnter(e) {    e.preventDefault();
                        this.dragCount++;
                        this.isDragging = true;
                        return false;
                    },
    OnDragLeave(e) {   e.preventDefault();
                        this.dragCount--;
                        if (this.dragCount <= 0)  this.isDragging = false;
                    },
    onInputChange(e) {  const files = e.target.files;
                        Array.from(files).forEach(file => this.addImage(file));
                    },
    onDrop(e) {console.log('ondrop-evnt e=',e)
        e.preventDefault();
        e.stopPropagation();
        this.isDragging = false;
        const files = e.dataTransfer.files;
        Array.from(files).forEach(file => this.addImage(file));
    },
    addImage(file) {console.log('addimage file=',file)
        if (!file.type.match('image.*')) {  this.$toastr.e(`${file.name} is not an image`);
                                            return;
                                        }
                    this.files.push(file);
                    const img = new Image(),
                    reader = new FileReader();
                    reader.onload = (e) => this.images.push(e.target.result);
                    reader.readAsDataURL(file);
                    console.log('addimage this.images=',this.images)
                },
    getFileSize(size) { const fSExt = ['Bytes', 'KB', 'MB', 'GB'];
                        let i = 0;
                        while(size > 900) { size /= 1024; i++; }
                        return `${(Math.round(size * 100) / 100)} ${fSExt[i]}`;
                      },
    upload() {  //this.progress = '0';
                const formData = new FormData();
                
                this.files.forEach(file => 
                {    formData.append('images[]', file, file.name);   });
                console.log('upload triggered FormData=',formData)
               // resp=axios.post('http://127.0.0.1:8000/sendemail1',this.formData); 
              //  axios.post('http://127.0.0.1:8000/api/imagesupload', formData,
                axios.post('https://uat.oms.dowell.com.au/api/imagesupload', formData,
                            {onUploadProgress:uploadEvent=>{  this.progress=Math.round(uploadEvent.loaded/uploadEvent.total*100);
                                        
                                    console.log('upld prges:'+    Math.round(uploadEvent.loaded/uploadEvent.total*100)+'%')
                                }
                            })
                //axios.post('https://uat.oms.dowell.com.au/api/imagesupload', formData)
                    .then(response => {
                        this.$toastr.s('All images uplaoded successfully');
                        this.images = [];
                        this.files = [];
                        this.progress = 0;
                        })
                            .catch(() => {
                                
                                this.$toastr.e('Could not upload the  files!');
                                this.images = [];
                                this.files = [];
                                this.progress = 0;
                                });
                                }
}
}
</script>

Another version with vuetify
https://github.com/manojkmishra/take5-front-admin/blob/master/src/components/img/imgup.vue

Here is laravel part

public function imagesupload(Request $request){
   if (count($request->images)) {
    foreach ($request->images as $image) {
        $image->store('images');
    }
  }
  return response()->json(["message" => "Done"]);
 }

Another way in laravel is here
https://github.com/manojkmishra/take5-api/blob/master/app/Http/Controllers/PicController.php