Upload Laravel + Vue.js

Question

I need to upload some files, but there is a detail, will be mounted a table as in the figure below, I can already add in the table itself, but at the time of the upload I do not have the slightest idea of the procedure, I do not know if I am passing correctly, Anyway, if you can give me a strength, briefly, it is a table where I select the file, the type it belongs and add/remove from the table but the files are only sent when I click save.

<!-- Tab das informações -->
                            <div role="tabpanel" class="tab-pane fade" id="informacoes">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-sm-12">Arquivo</label>
                                        <div class="col-sm-12">
                                            <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                                                <div class="form-control" data-trigger="fileinput">
                                                    <i class="glyphicon glyphicon-file fileinput-exists"></i>
                                                    <span class="fileinput-filename"></span>
                                                </div>
                                                <span class="input-group-addon btn btn-default btn-file">
                                                    <span class="fileinput-new">Selecionar arquivo</span>
                                                    <input type="file" name="..." accept="application/pdf" v-on:change="processaArquivo($event)">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="col-md-12">Tipo</label>
                                        <div class="col-md-12">
                                            <select class="form-control" v-model="arquivos.tipo">
                                                <option value="">Selecione o tipo</option>
                                                <option value="Comprovante de Endereço">Comprovante de Endereço</option>
                                                <option value="Declaração de Pobreza">Declaração de Pobreza</option>
                                                <option value="Doc. de Identificação (Autor)">Doc. de Identificação (Autor)</option>
                                                <option value="Doc. de Identificação (Réu)">Doc. de Identificação (Réu)</option>
                                                <option value="Documentos">Documentos</option>
                                                <option value="Petição">Petição</option>
                                                <option value="Petição Inicial">Petição Inicial</option>
                                                <option value="Procuração Adjudicia">Procuração Adjudicia</option>
                                                <option value="Procuração Pública">Procuração Pública</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="col-md-12">Ação</label>
                                        <div class="col-md-12">
                                            <a v-on:click="adicionarArquivos()" class="btn btn-info" type="button" style="cursor: pointer;">Adicionar</a>
                                        </div>
                                    </div>
                                </div>

                                @{{ arquivos }}

                                <div class="col-md-12 m-b-30">
                                    <div class="table-responsive">
                                        <table id="myTable" class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>Nome</th>
                                                    <th class="text-center">Data</th>
                                                    <th class="text-center">Tipo</th>
                                                    <th class="text-nowrap text-center">Ação</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-if="!processo.arquivos.length">
                                                <td colspan="4" class="text-center">NENHUM ARQUIVO ENVIADO</td>
                                            </tr>
                                            <tr v-else v-for="arquivo in processo.arquivos">
                                                <td>@{{ arquivos.arquivo }}</td>
                                                <td class="text-center">@{{ arquivo.data }}</td>
                                                <td class="text-center">@{{ arquivo.tipo }}</td>
                                                <td class="text-center">
                                                    <a style="cursor:pointer;"> <i class="fa fa-close text-danger m-r-10"></i> </a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="clearfix"></div>
                            </div>


adicionarArquivos: function () {
                if(this.arquivos.arquivo === '' || this.arquivos.tipo === '')
                    swal('Ops!', 'Selecione o arquivo e informe o tipo!', 'error');
                else
                {
                    // Adiciona a arquivo na lista
                    this.processo.arquivos.push(this.arquivos);
                    console.log(this.arquivos);
                    // Redefine os valores do input e select
                    //this.arquivos.arquivo = '';
                    //this.arquivos.tipo = '';
                }
            },
            processaArquivo(event) {
                this.arquivos.arquivo = event.target.files[0].name;
                console.log(event);
            },





            // Envia um post de inserção de dados
            insereDados: function ()
            {
                if(!this.processo.numero || !this.processo.data_protocolo || !this.processo.area || !this.processo.instancia
                    || !this.processo.foro || !this.processo.classe)
                    swal('Ops!', 'Existem campos obrigatórios em branco!', 'error');
                else
                {
                    if(this.processo.autores === 0 || this.processo.reus.length === 0)
                        swal('Ops!', 'Você deve adicionar os autores e os réus!', 'error');
                    else{
                        this.$http.post('/processos/inserir', this.processo).then(response => {
                            if(response.bodyText === "true")
                                swal({
                                    title: 'Sucesso!',
                                    text: "Operação realizada com sucesso!",
                                    type: 'success',
                                    showCancelButton: false,
                                    confirmButtonText: 'Ok'
                                }).then(function () {
                                    window.location = '/processos/';
                                });
                            else
                                swal('Ops!', 'Erro na solicitação, tente novamente!', 'error');

                        }, response => {
                            swal('Ops!', 'Erro na solicitação, tente novamente!', 'error');
                        });
                    }
                }
            },

Answer 1

Hello friend it may be late to answer but I did something similar.

$('#addDoc').click(function() {

        if ($('#doc_adicionais').get(0).files.length === 0) {
            alert("Selecione um arquivo por favor...");
        } else if ($('#tipo option:selected').text() == '') {
            alert("Selecione um documento");
        } else if ($('#tipo').find(':selected').attr('data-validade') == 1 && $('#emissao').val() == '') {
            alert('selecione uma data por favor...')
        } else {
            AddDoc();
            dados();
            disableSelect(true, 'red', '')
        }
    });

    function AddDoc() {
        arrayDoc.push({
            'arquivo': $('.var').prop('files')[0],
            'nome': $('.var')[0].files[0].name,
            "tipo": $('#tipo option:selected').text(),
            "emissao": '2001-03-10 17:16:18'
        });
    }

    function removeItemArray(id) {
        index = arrayDoc.map(function(e) {
            return e.tipo;
        }).indexOf(id);
        arrayDoc.splice(index, 1);
        dados();
        $('select[name=tipo]').val(id);
        $('#tipo ').selectpicker('refresh');

    }

    function disableSelect(result, color, id) {
        let tipo = $('#tipo option:selected')
        tipo.attr('disabled', result);
        tipo.css('color', color);
        $('#tipo ').selectpicker('refresh');
    }

    function dados() {
        $('#lista_doc').empty();
        arrayDoc.forEach(function(doc) {
            $("#lista_doc").append(
                '<li class="list-group-item d-flex justify-content-between align-items-center">' +
                doc.nome + '<button  type="button" class="btn btn-outline-primary">' + doc.tipo +
                '</button>' +
                '<button type="button" onclick= removeItemArray("' + doc.tipo +
                '") class="btn btn-outline-danger"><i class="far fa-trash-alt"></i></button></li>');
        })
    }

    $("#tipo").on('change', function(e) {
        var dado = $(this).find(':selected').attr('data-validade');
        if (dado == 0) {
            $('#validade').hide();
        } else {
            $('#validade').show()
        }
    });
    
     function DocOpcColaborador(id_colaborador) {

        var formData = new FormData();

        arrayDoc.forEach(function(doc) {
            formData.append('arquivo', doc.arquivo);
            formData.append('tipo', doc.tipo);
            formData.append('emissao', doc.emissao);
            formData.append('colaborador', $('#nome').val());
            formData.append('matricula', $('#matricula').val());
            formData.append('id_colaborador', id_colaborador);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            event.preventDefault();
            $.ajax({
                data: formData,
                url: "{{ route('docColaborador.store') }}",
                type: "post",
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    alert('Cadastro Realizado Com Sucesso');
                    console.log(data);
                },
                error: function(data) {
                    console.log(data);
                    alert('Erro ao cadastrar');
                },
            });
        });