Vue.js component for a File field which makes an Ajax request to server

Fileupload.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body upload-file-wrapper">
                        <input
                            type="file"
                            name="file"
                            ref="file"
                            multiple
                            v-on:change="handleFileUpload"
                        >
                        <button class="btn btn-primary" @click="handleButtonClick" v-text="buttonTxt" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                buttonTxt: 'Upload'
            }
        },
        methods: {
            handleButtonClick(event) {
                this.$refs.file.click();
            },
            handleFileUpload(event) {
                this.buttonTxt = 'Uploading...';
                let files = this.$refs.file.files;
                let formData = new FormData();
                let headers = {'Content-Type': 'multipart/form-data'};

                for (let i = 0; i < files.length; i++) {
                    formData.append('files[' + i + ']', files[i]);
                }

                formData.append('_hidden', 'Amitav Roy');

                window.axios.post('/file/upload', formData, headers)
                    .then(response => {
                        console.log('response', response);
                        event.target.value = null;
                        setTimeout(() => {
                            this.buttonTxt = 'Upload';
                        }, 400);
                    })
                    .catch(error => console.error('error uploading file', error.response));
            }
        }
    }
</script>

<style lang="scss" scoped>
.upload-file-wrapper {
    input[type=file] {
        display: none;
    }
}
</style>

web.php

Route::post('/file/upload', function(Request $request) {
    $files = $request->file('files');

    foreach ($files as $file) {
        $filename = $file->getClientOriginalName();
        $file->storeAs('/uploads', $filename);
    }

    return response()->json([], 201);
});

Hi, How to use PHP inside vue in upload files in one directory to other upload directories, can you explain the integration of web.php.
Actually, I am also looking similar way of image upload in vue without php. Please give me some help in this point.

What do you mean by PHP inside Vue? I didn't understand that.
Please explain, based on that I will definitely try to solve your query

I saw your video- https://www.youtube.com/watch?v=9B-xriETQ9M, You are using php, vue and laravel in this project. Actually, i am also doing image upload in vuejs but in above code you are calling php in line no.47- window.axios.post('/file/upload', formData, headers) , in my scenario i am not using php with vuejs. In vuejs $file->storeAs('/uploads', $filename) - storeAs is not function in Vuejs, it is use in php.
I am doing image upload, when i upload the image that image can transfer to local drive (absolute)path to the project's folder path in vuejs. actually i want image path , that path i am giving backend and backend person are access that image path and copy to according use. I have tried multer and fs-extra npm packge for upload image move local drive to another folder(inside project folder) but these libaries not working.