Массив файлов не может быть проверен сервером (php)

Question

Я пытаюсь передать указанные ниже данные в laravel бэкэнд:

form: new Form( {
    name: '',
    file2: null,
    licenses: [
        {name: '', xerox: null},
        {name: '', xerox: null},
    ]
}),

Я столкнулся с laravel проблемой проверки. Например, если я попытался отправить данные с помощью FormData () , тогда php получил массив и может проверить данные, кроме элемента массива (т.е. лицензий), который также содержит вложенные файлы в массиве объекты.

Со стороны сервера он получает, как показано на рисунке ниже. Он не показывает изображения прикрепленных лицензий, за исключением изображения профиля.

Ниже приведены сведения о кодах, включая репо проекта, если это необходимо. Подскажите, пожалуйста, как я мог отправить данные с вложением на сервер?

Пример компонента. vue

<template>
    <b-form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">

        <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
            <b-form-input
            id="input-2"
            v-model="form.name"
            placeholder="Enter name"
            ></b-form-input>
        </b-form-group>

        <input type="file" id="file" ref="file" v-on:change="handleFileUpload()" class="mb-3"/>

        <!--License-->
        <b-form-group label="License details(if applicable):" class="">
            <b-form-group v-for="(l, index) in form.licenses" :key="l.index" align-v="center" class="">
                <b-card bg-variant="light">                                           

                    <b-form-group>
                        <b-form-input id="input-license1" v-model="l.name" placeholder="Enter your License name:" class=""></b-form-input>
                    </b-form-group>

                    <b-form-group>
                        <input 
                            type="file" 
                            id="filelicense" 
                            name="xerox"
                            ref="licenseFile" 
                            v-on:change="handleLicenseFileUpload($event.target.name, $event.target.files[0], index)" 
                            class="mb-3"/>

                        <div>Selected file: {{ l.xerox ? l.xerox.name : '' }}</div>                                               
                    </b-form-group>

                </b-card>
            </b-form-group>
        </b-form-group>

        <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
</template>

<script>
    import Form from "../core/Form";

    export default {
        data() {
            return {
                form: new Form( {
                    name: '',
                    file2: null,
                    licenses: [
                        {name: '', xerox: null},
                        {name: '', xerox: null},
                    ]
                }),                
                isLoading: false
            }
        },
        methods: {
            handleLicenseFileUpload(fieldName, SelectedFile, index) {
                console.log(SelectedFile);
                this.form.licenses[index].xerox = SelectedFile;
            },

            onSubmit() {
                this.isLoading = true;                

                this.form.post('/candidates')
                    .then(response => {
                        this.response = response
                        console.log(response.data.message)                    
                    })
                    .catch((err) => {
                    })
                    .finally(() => {
                        this.isLoading = false
                    })
            },

            handleFileUpload(){
                this.form.file2 = this.$refs.file.files[0];
            }
        },        
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

CandidateController . php

public function store(Request $request)
{

    $data = $request->validate([
        'name'              => 'required',
        'file2'             => '',
        'licenses.*.name'   => 'required',
        'licenses.*.xerox'  => 'required',
    ]);

    dd($request->all());

Форма. js Предоставлено

import Errors from './Errors';
class Form {

    constructor(data) {
        this.originalData = data;

        for (let field in data) {
            this[field] = data[field];
        }

        this.errors = new Errors();
    }

    data() {
        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }

        return data;
    }

    setFormData(data) {
        let formData = new FormData();
        for (let field in data) {
          formData.append(field, data[field]);
        }
        return formData;
    }

    reset() {
        for (let field in this.originalData) {
            this[field] = '';
        }

        this.errors.clear();
    }

    post(url) {
        return this.submit('post', url);
    }

    submit(requestType, url) {
        let config = {
            headers: {
                Authorization: 'sometoken',
                'Content-Type': `multipart/form-data; boundary=${Math.random().toString().substr(2)}`,
            }
        }
        return new Promise((resolve, reject) => {
            axios[requestType](url, this.setFormData(this.data()))
                .then(response => {
                    this.onSuccess(response.data);

                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data.errors);
                    reject(error.response.data);
                });
        });
    }

    onSuccess(data) {
        //alert(data.message); // temporary

        this.reset();
    }

    onFail(errors) {
        this.errors.record(errors);
    }
}
export default Form;