Estoy tratando de cargar archivos usando multer o formidable . Los archivos se cargan correctamente y también se almacenan en la carpeta public . Usé create-react-app para comenzar con el proyecto React.
El problema surge cuando hago clic en el botón Enviar para cargar los datos. Utilicé la API de recuperación para realizar la solicitud POST. La página se vuelve a cargar después de hacer clic en el botón Enviar y todo lo que inicie sesión en la consola también se actualiza. Esto también fue respondido aquí , pero quiero saber cómo evito que mi página se vuelva a cargar. ¿Debo almacenar mis imágenes fuera de la carpeta public ?
Aquí está mi función handleSubmit() que llama cuando se envía el formulario: -
const handleSubmit = async (e) => { e.preventDefault(); let formData = new FormData(); formData.append("poster", document.getElementById('file').files[0]); let res = await fetch("http://localhost:5000/api/post/exhibition", { method: "POST", body: formData }) const json = await res.json() console.log(json) } EDITAR: - Manejo onSubmit
<form onSubmit={handleSubmit} encType="multipart/form-data"> .... </form>Esto se debe a que cuando su carga se realiza correctamente, el paquete web detecta un archivo nuevo y vuelve a cargar la página.
de https://github.com/facebook/create-react-app/issues/2541#issuecomment-308750412
No creo que hagamos esto, ya que parece que la gente generalmente no usa la carpeta pública para cargar. Y no funcionaría en producción de todos modos.
Recomendaría usar un servidor separado (que necesita de todos modos) y una carpeta separada para cargar imágenes, y hacer que la aplicación cargue imágenes desde un host/puerto diferente (tal como lo haría en producción, por ejemplo, desde un CDN).
si está utilizando esa función en el atributo onsubmit del formulario, debe devolver false de esa función
const handleSubmit = async (e) => { e.preventDefault(); let formData = new FormData(); formData.append("poster", document.getElementById('file').files[0]); let res = await fetch("http://localhost:5000/api/post/exhibition", { method: "POST", body: formData }) const json = await res.json() console.log(json) return false }