0

Estoy desarrollando un sistema con el stack mevn pero tengo el siguiente error al subir una imagen al servidor, espero me puedan apoyar

PUT /api/agencia/upload 500 0.725 ms - 30
TypeError: Cannot read property 'file0' of undefined
    at _callee4$ (C:/SISTEMAS/SAAEMP/controllers/AgenciaController.js:52:39)
    at tryCatch (C:\SISTEMAS\SAAEMP\node_modules\babel-polyfill\node_modules\regenerator-runtime\runtime.js:65:40)

En mi backend si me funciona ya que e probador mi funcion upload con postman y si me guarda el nombre del fichero en mi coleccion en mongodb y al igual almacena la imagen en el servidor en la carpeta que le indique

El error lo tengo al momento de usar la funcion en mi componente VUE Saludos

Este es mi controlador:

upload: async(req,res,next)=>{
        try{
            var file_path = req.files.file0.path;
            var file_split = file_path.split('\\');
            var file_name = file_split[2];

            // Extensión del fichero
            var extension_split = file_name.split('\.');
            var file_ext = extension_split[1];

            const reg = await models.Agencia.findOneAndUpdate({_id: req.body._id}, {archivo: file_name});
                res.status(200).json(reg)

        }catch(e){
            res.status(500).send({
                message:'Ocurrio un error'
            });
            next(e);
        }
    },

Este es mi metodo en vue

guardar(){
            let me=this;
            let header={"Token":this.$store.state.token};
            let configuracion= {headers: header}
            this.file= this.$refs.file.files[0]

            const formData = new FormData()
            formData.append('file0',this.file,this.file.name)


             if(this.editedIndex >-1 ){    
                axios.put('agencia/upload',{'_id':this._id,formData})
               .then(function(response){

                 me.limpiar();
                 me.close();
                 me.listar();
               }).catch(function(error){
                 console.log(error)
               });
             }else{

                console.log(this.file,this.file.name)
                axios.post('agencia/add',{'nombre':this.nombre,'rfc':this.rfc,'representante':this.representante,'folio':this.folio,'archivo':formData},configuracion)
               .then(function(response){

                 me.limpiar();
                 me.close();
                 me.listar();

               }).catch(function(error){
                 console.log(error)
               });
               }

Aqui obtengo el archivo que quiero subir a mi servidor

<div class="form-group">
         <v-col cols="12" sm="12" md="12">
              <input type="file"  id="file" ref="file" name="file0" label="File input"/>
          </v-col>
   </div>
1
  • mayúsculas == gritar. Edita por favor. Gracias
    – fredyfx
    el 5 feb. 2020 a las 20:13

1 respuesta 1

0

Creo que el problema radica en el cuerpo de tu request, si lo que necesitas en enviar el archivo tu request debe de tener el header de Content-Type = multipart/form-data. Y debes de enviar un FormData como el cuerpo de request en vez de un JSON.

Ejemplo:

const formData = new FormData();
formData.append('nombre', ...)
formData.append('rfc', ...);
formData.append('filename',this.file.name);
formData.append('file',this.file);

axios.post('agencia/add',formData, {
   ...configuracion,
   "Content-Type": "multipart/form-data",

})
1
  • Eres un master, ya quedo solucionado, estabas en lo correcto, el error era en el cuerpo de mi request. Muchas gracias.
    – jordycan9
    el 6 feb. 2020 a las 18:30

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.