3

amigos tengo la siguiente situación:

dentro de un formulario, tengo la opción de adjuntar un documento (PDF,WORD,JPG,NPG) el cual debe guardarse al momento de hacer clic en el botón.

resultado esperado : que se guarden los datos del formulario en mi base MongoDB y que se suba el archivo al directorio.

resultado obtenido en local desde la misma maquina: los datos se guardan en la base, y el archivo se sube a la ruta.(funciona)

resultado obtenido en server: los datos se guardan en la base, el archivo se sube a la ruta, pero el proceso se cae al obtener datos del request

resultado obtenido en local desde un segundo pc: los datos se guardan en la base, el archivo se sube a la ruta, pero el proceso se cae al obtener datos del request

código del back:

function uploadImage(req, res) {
    console.log('-------- uploadImage --------')
    console.log('request' + req)
    var userId = req.params.id
    var file_name = 'No subido...'
    console.log(req.files)
    try {
        if (req.files) {
            var file_path = req.files.image.path   ------> aquí se cae.
            var file_split = file_path.split('/')
            var file_name = file_split[2]
            var ext_file = file_name.split('.')
            var file_ext = ext_file[1]

            if (file_ext == 'jpg' || file_ext == 'gif' || file_ext == 'png' || file_ext == 'jpeg' || file_ext == 'doc' || file_ext == 'docx' || file_ext == 'pdf') {
                User.findByIdAndUpdate(userId, { letter: file_name }, (err, userUpdated) => {
                    if (!userUpdated) {
                        res.status(404).send({ message: 'No se ha podido actualizar la imagen'+ req.files })
                        console.log('404 No se ha podido actualizar la imagen' )
                    } else {
                        res.status(200).send({ User: userUpdated })
                        console.log('200 -ok')
                    }
                })
            } else {
                res.status(404).send({ message: 'La extension no es correcta' })
                console.log('404 La extension no es correcta')
            }
        } else {
            res.status(404).send({ message: 'No se ha subido ninguna imagen' })
            console.log('404 No se ha subido ninguna imagen')

        }
    } catch (error) {
        res.status(500).send('Erro'+ req)
    }
}

las rutas:

    var express= require('express')
    var UserController=require('../controllers/user')
    var api= express.Router();
    var md_auth= require('../middlewares/authenticated')

    var multipart=require('connect-multiparty')
    var md_upload=multipart({uploadDir:'./uploads/users'})
    api.post('/upload-Image-user/:id',[md_upload],UserController.uploadImage)

los datos del server es una maquina linux(ubuntu) en AWS con un balanceado que tiene el certificado para HTTPS. -la ruta tiene los permisos (es mas le di permiso 777 para descartar) -si ejecuto guardar un usuario con postman tambien lo hace bien, por lo tanto la base esta funcionando bien.

necesito algún consejo por donde puede ir el error.

desde ya muchas gracias.

11
  • 1
    Por fin una pregunta muy bien hecha, lastima que nunca he usado mongodb junto con nodejs xd, pase por aqui por curiosidad :v
    – Layer
    el 29 may. 2020 a las 1:03
  • Una pregunta... estas intentando subir archivos desde local hacia la ruta de tu servidor en AWS?, o directamente usas la aplicacion subida en el AWS para intentar subir los archivos??
    – Layer
    el 29 may. 2020 a las 1:17
  • las pruebas front y backend local funcionan OK -->esto desde mi red local 1 pc haciendo de server y otro de cliente las pruebas front y backend en AWS no --> desde mi pc voy a la pagina www , me guarda el usuario , pero no sube el archivo.
    – floyd70s
    el 29 may. 2020 a las 1:29
  • 1
    Se me ocurre un problema en el servidor, pero no problema de acceso, si no problema de configuración, me explico, recuerdas cuando eramos novatos y no sabiamos que habia un limite por POST de unos 5 o 6 MB al usar xampp para enviar un archivo?, esto mismo puede que este pasando en AWS, o es mas, quizá hasta haya que activar la subida de archivos de una manera especial o configurarla de algún modo, puedes intentar revisar en AWS si hay alguna parte para configurar el tamaño maximo de subida de un archivo, posiblemente no funcione por el tamaño del archivo o porque la subida esta desactivada.
    – Layer
    el 29 may. 2020 a las 3:41
  • 1
    Dependiendo de la librería o módulo que uses para el manejo de multipart, el objeto req.files puede ser de tipo Array o puede ser un objeto que contenga mútiples objetos tipo file diferenciados en el nombre por algún índice. Por ejemplo: req.files.file_1 y así sucesivamente. ¿Podrías hacer una depuración de req.files y verificar lo que te arroja en consola? Veo que usas connect-multiparty, particularmente desaconsejo su uso. Saludos el 29 may. 2020 a las 8:59

1 respuesta 1

2

amigos, gracias por la ayuda, les cuento que resolví el problema. acá algunos puntos: - permisos de las carpetas. - cambie la libreria - ojo con los "slash slash"...

aca va el código: esto es en el ROUTER

var multer = require('multer');
const storage = multer.diskStorage({
    destination(req, file, cb) {
        cb(null, 'uploads/users');
    },
    filename(req, file = {}, cb) {
        const { originalname } = file;
        const fileExtension = (originalname.match(/\.+[\S]+$/) || [])[0];
        crypto.pseudoRandomBytes(16, function (err, raw) {
            cb(null, raw.toString('hex') + Date.now() + fileExtension);
        });
    },
});

api.get('/get-Image-user/:imageFile', UserController.getImageFile)

luego la función que sube el archivo (Controller):

async function upImage(req, res) {
    if (req.file) {
        // console.log(req.file);
        var userId = req.params.id
        var file_path = req.file.path;
        // var file_split = file_path.split('\\');
        var file_split = file_path.split('/');
        var file_name = file_split[2];
        var ext_split = req.file.originalname.split('\.');
        var file_ext = ext_split[1]

        console.log('---------------------')
        console.log('file_name: '+file_name)
        console.log('file_split[0]: '+file_split[0])
        console.log('file_split[1]: '+file_split[1])
        console.log('file_split[2]: '+file_split[2])
        console.log('req.file.path: '+req.file.path)
        console.log('req.params.id: '+req.params.id)
        console.log('file_ext: '+file_ext)
        console.log('---------------------')


        if (file_ext == 'jpg' || file_ext == 'gif' || file_ext == 'png' || file_ext == 'jpeg' || file_ext == 'doc' || file_ext == 'docx' || file_ext == 'pdf'|| file_ext == 'png') {
            User.findByIdAndUpdate(userId, { letter: file_name }, (err, userUpdated) => {
                if (!userUpdated) {
                    res.status(404).send({ message: 'No se ha podido actualizar la imagen' + req.files })
                    console.log('404 No se ha podido actualizar la imagen')
                } else {
                    res.status(200).send({ User: userUpdated })
                    console.log('200 -ok')
                }
            })
        } else {
            res.status(200).send({ message: 'Extension del archivo no valida' });
        }
        console.log(file_path);
    } else {
        res.status(200).send({ message: 'No has subido ninguna imagen..' });
    }
}

otra observación: para evitar los problemas de CORS , debes incluir las cabeceras en el backend:

//cabeceras http 
app.use((req,res,next)=>{
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method,');
    res.header('content-type: application/json; charset=utf-8')
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
    next()
})

y en el front cuando haces el formulario para subir el archivo:

el formulario:

<input
                            placeholder="Selecciona la carta"
                            type="file"
                            id="INPUT_TAG"
                            accept="image/*,.pdf,.doc,.docx"
                            className="formInput"
                            onChange={e => this.handle(e)}
                            placeholder='selecciona tu carta'
                        />

la funcion cuando pinchas el input del archivo:

 handle = e => {
            const imageFile = e.target.files[0];
            this.setState({
                originalLink: URL.createObjectURL(imageFile),
                originalImage: imageFile,
                outputFileName: imageFile.name,
                uploadImage: true
            });
        };//------------------------------------------------------------------------------------

aca va la función que se llama cuando pinchas el botón subir: fíjate que crea un nuevo form para el archivo.

saveImage = (userId, files) => {
    console.log('---- saveImage -----')

    console.log('userId' + userId)
    console.log(files[0])

    var formData = new FormData();
    formData.append("image", files[0]);
    var payload = 'upload/'

    var url = host + payload + userId,
        params = {
            method: 'POST',
            body: formData,
        };
    // var request = new Request(url, params);
    fetch(url,params)
        .then(res => {
            res.json()
            console.log('respuesta del servicio:' + res.status)
            console.log('respuesta del servicio:' + res._id)
            return (res.status)
        })
        .catch((err) => {
            return "error";
        })
}//------------------------------------------------------------------------------------
0

Tu Respuesta

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

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