<template>
    <div class=" row my-card">
      <q-uploader
        class="my-card"
        accept="image/*"
        :fieldName="(file) =>`image${file.name}`"
        :headers="[ { name: 'Authorization', value: $toks }]"
        with-credentials
        multiple
        batch
        @uploaded="useUploaded"
        :url="files=>`${$url}/upload-image`"
        label="Select Course Image to Upload"

      />
    </div>
</template>

<script lang="ts">
import {
  defineComponent
} from '@vue/composition-api'

export default defineComponent({
  name: 'ImageUploader',
  setup () {
    function useUploaded (info:{files:string[];xhr:{response:string}}) {
      console.log('files :>> ', info.files)
      console.log('url :>> ', JSON.parse(info.xhr.response))
    }
    return { useUploaded }
  }
})
</script>

Route::post('upload-image', 'ImageController@ImageUpload');

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Storage;
use Validator;

class ImageController extends Controller
{
    public function __construct()
    {
        $this->middleware(['auth:api'])->except([]);
    }

    public function ImageUpload(Request $r)
    {
        $validator = Validator::make($r->all(), [
            'image.*' => 'required|file|image|mimes:jpeg,png,gif,svg'
        ]);
        if ($validator->fails()) {
            logger(['error' => $validator->errors()]);
            return ['status' => 0];
        }
        $images = $r->all();
        $paths = [];
        foreach ($images as $image) {
            $extension = $image->getClientOriginalName();
            $filename  = 'image-' . time() . '.' . $extension;
            Storage::disk('public')->putFileAs('/images/', $image, $filename);
            $paths[] =   url(Storage::url('images/'.$filename));
        }

        return $paths;
    }
}