-1

Saludos tengo un inconveniente con Laravel, quiero enviar un archivo excel desde mi componente realizado en Vuejs. Deseo Importar este archivo de aprox 5Mb copn 36 registros a una tabla. Estoy usando la libreria LaravelExcel V.3, Estoy usando multipart/form-data en mi formulario y mi ruta son del tipo POST con la libreria axios. Agradezco sus respuestas y aportes.

Mi Componente - FrontEnd

<div class="body">
  <form method="post" enctype="multipart/form-data">
                           <input 
                            type="file" 
                            id="file" 
                            ref="fileupload" 
                            class="form-control-file" 
                            @change="onChanged" 
                            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                            >
                            <br>
                            <button 
                            class="btn btn-success" 
                            @click="importaexcel()">
                            Importar Catalogo
                            </button>
                            </form>
                       </div>

Mi componente - Vuejs

<script>
    export default {
    data(){
        return{
            archivo:''
        }
    },
    methods:{
        onChanged: function(event){
            this.archivo = event.target.files[0];
        },

        importaexcel: function(){
            let me = this;
            let datos = this.archivo
            var formData = this.toformData(datos);
            axios.post(
                this.ruta+"/actualizacatalogo",
                formData,
                {
                    "content-type": "multipart/form-data"
                }
                .then(Response =>{
                    alert('ok subio')
                }).catch( error =>{
                    console.log('Tenemos errores:'+error)
                })
            );
        },
        toformData(obj){
            var formData  = new FormData()
            for(var key in obj){
                formData.append(key,obj[key])
            }
            return formData        
        }

    }
    }
</script>

Mis Ruta Post en Laravel

//Medicamentos (Catalogo)
Route::post('/actualizacatalogo','MedicamentoController@importarexcel');

Mi Controlador

public function importarexcel(Request $request)
    {

            Excel::import(new MedicamentoImport(),$request->file('file'));
            return back();

    }

introducir la descripción de la imagen aquíintroducir la descripción de la imagen aquí

3
  • Parece que tienes un error de sintaxis, pues deberías cerrar el paréntesis del método post para luego agregar .then y .catch: axios.post(this.ruta+"/actualizacatalogo", formData).then(...).catch(...);. Y no necesitas configurar el content-type, pero no creo que eso sea importante. Commented el 14 nov. 2019 a las 15:53
  • Realize los cambios amigo, y igual me sale el mismo error
    – Daviss9
    Commented el 19 nov. 2019 a las 2:40
  • No sé que tienes en this.ruta que le agregas a la url que le pasas a axios. Viendo tu ruta de Laravel Route::post('/actualizacatalogo','MedicamentoController@importarexcel');, esta llamada axios debería funcionar axios.post('/actualizacatalogo', formData).then(function (response) { console.log(response); alert('ok subio'); }).catch(function (error) { console.log(error); }); tal cual como está en la documentación Commented el 19 nov. 2019 a las 16:27

1 respuesta 1

0

Se me ocurren algunas sugerencias:

Ruta inexistente:

Podría ser que le estés pegando a una ruta que no corresponde. En tus cabeceras dice que pediste http://127.0.0.1:8000/ cuando al menos yo esperaría que apuntaras a http://127.0.0.1:8000/actualizacatalogo.

Eso me hace pensar que, dado que no veo la defición de this.ruta, estés en realidad apuntando a una url que no existe. Puede que en realidad sólo la hayas omitido en el ejemplo.

Envío del formulario en forma síncrona

Tu webserver (webpack devserver?) declara que sólo acepta GET y HEAD, de manera que aunque declares la ruta como Route::post ese request terminó en otro lado. De hecho, terminó en un documento con el mensaje de error de la librería Whoops.

Eso significa que la data no se envía por ajax sino al estilo old school via formulario. Esto probablemente se debe a tu listener:

@click="importaexcel()"

Que debiera ser:

@click.prevent="importaexcel"

Error de sintaxis en Axios

Esto no es la causa del fenómeno, pero tienes otros problemas que van a saltar rio abajo. Donde dice:

  axios.post(
            this.ruta+"/actualizacatalogo",
            formData,
            {
                "content-type": "multipart/form-data"
            }
            .then(Response =>{
                alert('ok subio')
            }).catch( error =>{
                console.log('Tenemos errores:'+error)
            })
        );

Debiera decir:

  axios.post(
     this.ruta+"/actualizacatalogo",
     formData,
     {
       "content-type": "multipart/form-data"
     })
     .then(Response =>{
        alert('ok subio')
     }).catch( error =>{
        console.log('Tenemos errores:'+error)
     });
  );

Y es más, si quieres pasarle los headers, debiera ser:

   axios.post(
     this.ruta+"/actualizacatalogo",
     formData,
     {
       headers:  {
         "content-type": "multipart/form-data"
       }
     })

Pero en realidad no es necesario. Lo va a mandar igual como multipart.

Error al llenar el FormData

Cuando haces

    this.archivo = event.target.files[0];
    // y luego

    let datos = this.archivo
    var formData = this.toformData(datos);

Lo que le pasas a this.toformData no es un objeto de campo=>valor, sino un objeto de tipo File. Un objeto de tipo File tiene propiedades enumerables como el nombre, tamaño, mimetype y la fecha, pero en realidad lo que tú quieres hacer es:

  var formData = this.toformData({file:this.archivo});

Y hacer el append del archivo mismo, no de sus propiedades.

Finalmente:

Acostúmbrate a usar la sintaxis al estilo "class" que usa vue. Tal como tienes

   toformData(obj) {
        ...  
    }

Debieras declarar

    onChanged(event){
        ...
    },

    importaexcel(){
       ...
    }

y no

    onChanged: function(event){
        ...
    },

    importaexcel: function(){
       ...
    }

Por experiencia propia, en alguna parte se puede perder el contexto de this y eso será difícil de debuggear.

Te dejo un ejemplo funcionando en Plunkr aunque tuve que cambiar la url porque ahí no hay backend

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.