0

Estoy intentando subir un total de 5 imagenes a la vez con multer, estoy haciendo una aplicacion en expo react native, en la cual necesito subirlas, pero al querer hacerlo no me deja:

Codigo:

import React, { useState, useEffect } from 'react';
import { View,Text, TouchableOpacity, StyleSheet,Modal,ScrollView,Image,FlatList } from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import { ImageBrowser } from 'expo-multiple-media-imagepicker';
const fotos =(props)=>{
    const uri_fotos = []
    const { navigate } = props.navigation;
    const[visible,setVisible]=useState(false)
    const respuestaopcion =(callback)=>{
        callback.then((photo)=>{
            setVisible(false)
        }).catch((e)=>{
            console.log(e)
        })
    }
    const crea_array_foto =()=>{
        for (const iterator of photos) {
            uri_fotos.push(iterator)

        }
    }
    const mover_imagen =()=>
    {
        var formData = new FormData();
        formData.append('fotos',uri_fotos)
        fetch('http://192.100.1.1:3000/multifoto',{
            method:"POST",
            headers:{
              'Accept':'application/json',
              'Content-Type':'multipart/form-data',
            },
            body:formData
        })
        .then((response)=>response.json())
        .then((res)=>{
            if(res.code ==1){
                console.log("se subio correctamente")
            }
            else{
                console.log('Hubo un error')
            }
        })
    }
    return(
        <View style={styles.container}>
            <Modal visible={visible}>
                <ImageBrowser
                    max={5}
                    headerCloseText={'Cancelar'}
                    headerDoneText={'Añadir'}
                    headerSelectText={'seleccionada(s)'}
                    callback={respuestaopcion}
                />
            </Modal>
            <TouchableOpacity style={styles.foto} onPress={()=>setVisible(true)}>
                <Text style={styles.titulo_boton}>Subir Fotos</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.siguiente} onPress={()=>{navigate("Ubicacion");crea_array_foto();mover_imagen()}}>
                <Text style={styles.texto_siguiente}>Siguiente</Text>
                <Arrow name={'ios-arrow-forward'} size={40} color={'white'} style={styles.arrow}/>
            </TouchableOpacity>
        </View>
    )
}
export default fotos

Al menos en el front-end no hay error alguno, en otra vista del front-end envio imagenes, por lo que creo que el problema esta en el backend. Aquí esta el codigo de Node.js en donde subo las imagenes:

const express = require('express')
const url = express()
const morgan = require('morgan')
const bodyParser = require('body-parser')
const mysql = require('mysql')
const util = require('util')
const multer = require('multer')
url.use(morgan('dev'))
url.use(bodyParser.json());
url.use(bodyParser.urlencoded({ extended: true }));


const storage = multer.diskStorage({
    destination:'./Imagenes',
    filename:(req,file,cb)=>{
        cb(null,file.originalname)

    }
})


url.use(multer({
    storage:storage,
    dest:'./Imagenes'

}).single('foto'))
//Registro de un usuario
url.post('/registro',(req, res)=>{
    const foto_array = req.file
    const nombre_foto = foto_array.filename
    const nombre = req.body.nombre
    const apellido = req.body.apellido
    const apellido_materno = req.body.apellido_materno
    const correo = req.body.correo
    const fecha = req.body.fecha
    const password = req.body.password


     const query = `INSERT INTO usuario(Nombre, Apellido_paterno,Apellido_materno, Correo, Foto,Fecha_nacimiento,Password) VALUES('${nombre}','${apellido}','${apellido_materno}','${correo}','${foto}','${fecha}','${password}')`
     pool.query(query).then(rows=>{
         res.status(200)
         res.json(rows)

     }

})

url.post("/multifoto",(req,res)=>{
     const multer = require('multer');

    var storage = multer.diskStorage({
          destination:'../Imagenes',
         filename:(req,file,cb)=>{
           cb(null,file.originalname)

        }
   })
   var upload = multer({storage:storage, dest:'../Imagenes'}).array('fotos',5)
   uploads(req,res, function(err){
    if(err){
        console.log(err)
        res.send({code:0})
    }
    res.send({code:1})
   })

})


url.listen(3000,()=>{
    console.log("Corriendo.....")
})

Cuando un usuario se registra, este puede subir una imagen de perfil, pero luego puede subir varias imagenes en un album. Sin embargo, al momento de enviarlas no se suben a mi carpeta Imagenes, pero en la ruta /registro si sube la imagen a mi carpeta.

La variable uri_fotos guarda un array de las imágenes seleccionadas, y lo que se guarda en el array es esto:

Array [
  Object {
    "creationTime": 1591222096000,
    "duration": 0,
    "exif": Object {
      "ColorModel": "RGB",
      "Depth": 8,
      "PixelHeight": 788,
      "PixelWidth": 940,
      "{JFIF}": Object {
        "DensityUnit": 0,
        "IsProgressive": true,
        "JFIFVersion": Array [
          1,
          0,
          1,
        ],
        "XDensity": 1,
        "YDensity": 1,
      },
    },
    "filename": "IMG_0996.JPG",
    "height": 788,
    "id": "5710F8F7-D228-4A20-84C0-2A75279A5CAA/L0/001",
    "isFavorite": false,
    "isHidden": false,
    "localUri": "file:///var/mobile/Media/DCIM/120APPLE/IMG_0996.JPG",
    "location": null,
    "mediaSubtypes": Array [],
    "mediaType": "photo",
    "modificationTime": 1591245651987,
    "orientation": 1,
    "uri": "assets-library://asset/asset.JPG?id=5710F8F7-D228-4A20-84C0-2A75279A5CAA&ext=JPG",
    "width": 940,
  },
]

2 respuestas 2

2

Lo solucione creando un middleware en donde coloque un archivo llamado descargas.js y coloque el siguiente código:

const multer = require('multer');

const storage = multer.diskStorage({
    destination:'./Imagenes',
    filename:(req,file,cb)=>{
        cb(null,file.originalname)

    }
})
const descargas = multer({storage:storage}).array('fotos',5)

module.exports =  descargas

en las rutas solo basta con exportar el archivo y colocarlo de la siguiente manera:

url.post('/multifoto',multiuploads,(req,res)=>{
    res.status(200)


})

Pero el problema es al imrimir en consola req.file salia undefined, por lo que concluí es que no es por el bodyparse como en muchos foros decían, sino que el formato de como envías la imagen es decir, de la siguiente manera:

const uri_fotos = {
    uri: "assets-library://asset/asset.JPG?id=5710F8F7-D228-4A20-84C0-2A75279A5CAA&ext=JPG",//aqui se coloca la ruta o uri de la imagen
    type:"image",//el tipo, puede ser jpg, la verdad es que da igual cual pongas, sin importar si tu imagen es una png u otro formato
    name:'IMG_0996.JPG'//coloque el originalname de la imagen, aunque puedes tambien colocar la uri o ruta, recomiendo primero testear con la uri

}

Me falto colocar como enviar un formato de array, es de la siguiente manera:

       for (const iterator of photos) {
            formData.append('fotos',{
                uri:iterator.uri,
                type:'image',
                name:iterator.filename,
            })   
        }
        fetch('http://192.100.1.1:3000/multifoto',{
            method:"POST",
            headers:{
              'Accept':'application/json',
              'Content-Type':'multipart/form-data',
            },
            body:formData
        })

Aún así gracias @JhoplaINC por estar al pendiente, espero que les sirva si alguien tiene este problema en común.

1
  • No te olvides de aceptar tu propia respuesta @Jorge
    – Juan Marco
    el 5 jun. 2020 a las 16:12
-1

creo que debes cambiar el .single('foto') por: array('foto'). Y eso te permitirá una selección de múltiples imágenes

3
  • en la ruta '/multifoto' y ahí especifique el .array('fotos'), en la que comentas es otra que coloque, la cual se usa cuando se registra un usuario. el 4 jun. 2020 a las 23:25
  • url.use(multer({ storage:storage, dest:'./Imagenes' }).single('foto')) => url.use(multer({ storage:storage, dest:'./Imagenes' }).array('foto'))
    – JhoplaINC
    el 5 jun. 2020 a las 1:45
  • creo que ese no es el error, verifique colocando un console.log(req.files) y me imprime undefined el 5 jun. 2020 a las 1:57

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.