Upload Laravel + Vue.js

1

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

<!--Tabdasinformações--><divrole="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');
                        });
                    }
                }
            },
    
asked by anonymous 06.11.2017 / 03:25

0 answers