Estoy tratando de cargar varias imágenes en React (nextjs) desde <input onChange={onChange} type='file' name='file' multiple/> Pero, ¿de qué manera es más adecuado hacerlo? Algunas horas de búsqueda en Google no me ayudaron. Este es mi enfoque (eso no funciona, de lo contrario no tendría que escribirlo):
Almacené los srcs de las imágenes usando useState hook:
const [imgsSrc, setImgsSrc] = useState([])Y esta es mi "entrada en el controlador de cambios":
const onChange = (changeEvent: any) => { for (let file of changeEvent.target.files) { setTimeout(() => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { setImgsSrc([...imgsSrc, reader.result]) } reader.onerror = () => { console.log(reader.error)} }, 1000) } } Mi input una vez más
<input onChange={onChange} type='file' name='file' multiple/>Y mi forma de tratar de mostrar imágenes al usuario.
{ imgsSrc.map((link) => { <img src={link}/> }) }Pero no me muestra nada, así que tengo un par de preguntas a las que mis células nerviosas estarían encantadas de obtener una respuesta.
public en el directorio raíz de la aplicación" es un buen enfoque para guardar imágenespor favor...
Guardar imágenes en el directorio público no es un buen enfoque, debe probar aplicaciones de computación en la nube como AWS, Google o Cloudinary. pero preferiría usar Cloudinary porque puede almacenar aproximadamente 10 GB de imágenes en una cuenta gratuita y también es fácil de integrar con aplicaciones de reacción. ¿Como funciona?
1- guarde su imagen en Cloudinary a través de una solicitud API, luego Cloudinary devuelve el enlace de la imagen en respuesta.
2-guardar el enlace de la imagen dentro de la base de datos
tutorial => subir imagen cloudinary y reaccionar
Básicamente tienes un par de errores que impiden que tu código muestre algo:
function App() { const [imgsSrc, setImgsSrc] = useState([]); const onChange = (e) => { for (const file of e.target.files) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { setImgsSrc((imgs) => [...imgs, reader.result]); }; reader.onerror = () => { console.log(reader.error); }; } }; console.log(imgsSrc, imgsSrc.length); return ( <div> <input onChange={onChange} type="file" name="file" multiple /> {imgsSrc.map((link) => ( <img src={link} /> ))} </div> ); }Dado que el lector de archivos es asíncrono, debe decirle a React que actualice el estado usando el estado más reciente, o tendrá errores, porque setState también es asíncrono, y los comandos de bucle se agrupan y se anulan entre sí.
El hecho de que no tenga ninguna salida de imagen se debe a que no está devolviendo nada de .map .
Puede verificar la versión corregida: https://stackblitz.com/edit/react-pgtpnu?file=src%2FApp.js
No puede guardar archivos en el servidor si está usando NextJS y lo implementa en un entorno sin servidor, necesita usar un servicio en la nube, puede usar firestore para guardar cadenas base64, o incluso mejor, cargue los blobs directamente en cloudinary, a través de Las funciones sin servidor de multer middleware nextJS le permiten escribir una función de este tipo en unas pocas líneas.