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,
},
]