Quería subir imágenes y mostrar la imagen que se eligió. Cómo mostrar la imagen después de elegir. este es mi código, ayúdame a mostrar la imagen, hice la función para publicar la imagen, puedo publicar varias imágenes con un solo clic pero no puedo mostrar la imagen para obtener una vista previa antes de cargarla, trato de usar el lector de archivos pero no puedo mostrar y subir
const [pImg, setPImg] = useState([]); const [images, setImages] = useState([]); const addImg = (ImagesPostDto) => { const data2 = new FormData(); [...ImagesPostDto].forEach((Images) => { data2.append("ImagesPostDto", Images); }); Axios.post(`/shop/${shopID}/Product/${pID}/Images`, data2) .then((res) => { if (res.status === 200) { setMessage({ data: `${res.data.MESSAGE}`, type: "alert-success", }); onShowAlert(); } }) .catch((err) => { setMessage({ data: `${err.response.data.MESSAGE}`, type: "alert-danger", }); setLoading(false); onShowAlert(); }); }; const handleImageChange = (e) => { e.preventDefault(); const ProductImg = e.target.files; setPImg(ProductImg); const reader = new FileReader(); reader.onloadend = () => { setPImg(ProductImg); setImages(reader.result); }; reader.readAsDataURL(ProductImg); }; const handleProductSubmit = (event) => { event.preventDefault(); addImg(pImg); }; return ( <div> <Form> <p> <Label htmlFor="file">Upload images</Label> <input type="file" id="file" onChange={handleImageChange} accept="image/png, image/jpg, image/jpeg" multiple /> </p> </Form> <div className=""> {/* {images.length > 0 ? ( <div> {images.map((image) => ( <p> <img src={images} alt="" /> </p> ))} </div> ) : null} */} </div>Si desea renderizar imágenes, cree ObjectURL a partir de una matriz de archivos y establezca el estado de las imágenes, entonces debería funcionar bien. He comentado el código relacionado con la llamada API para que podamos centrarnos en renderizar las imágenes seleccionadas. Simplemente puede copiar este código y pegarlo en CodeSandBox, debería funcionar bien. Aquí está su código un poco modificado:
import "./styles.css"; import { useState } from "react"; export default function App() { const [pImg, setPImg] = useState([]); const [images, setImages] = useState([]); // const addImg = (ImagesPostDto) => { // const data2 = new FormData(); // [...ImagesPostDto].forEach((Images) => { // data2.append("ImagesPostDto", Images); // }); // Axios.post(`/shop/${shopID}/Product/${pID}/Images`, data2) // .then((res) => { // if (res.status === 200) { // setMessage({ // data: `${res.data.MESSAGE}`, // type: "alert-success" // }); // onShowAlert(); // } // }) // .catch((err) => { // setMessage({ // data: `${err.response.data.MESSAGE}`, // type: "alert-danger" // }); // setLoading(false); // onShowAlert(); // }); // }; const handleImageChange = (e) => { e.preventDefault(); console.log("event", e); const ProductImg = [...e.target.files]; const images = ProductImg.map((image) => URL.createObjectURL(image)); console.log("images", images); setImages(images); }; // const handleProductSubmit = (event) => { // event.preventDefault(); // addImg(pImg); // }; return ( <div> <form> <p> <label htmlFor="file">Upload images</label> <input type="file" id="file" onChange={handleImageChange} accept="image/png, image/jpg, image/jpeg" multiple /> </p> </form> <div className=""> {images.length > 0 && ( <div> {images.map((image, index) => ( <p key={index}> <img src={image} alt="" /> </p> ))} </div> )} </div> </div> ); }Debe obtener las imágenes de GET API y configurar la respuesta en setImages de lo que mostrará en este momento, la variable de imágenes es una matriz vacía.
Hasta donde puedo entender su requerimiento, necesita obtener una vista previa de las imágenes cuando las haya seleccionado o después de cargarlas.
Lo que puede hacer es, siempre que esté preparando FormData o en el momento del evento de cambio, puede almacenar la URL del objeto de cada archivo seleccionado en otro estado y puede mostrar fácilmente estas imágenes a través del estado.