Diagnosticar la carga de imágenes en un editor React
Usa una imagen pequeña y un documento de prueba. Esta guía corresponde al ejemplo de galería React y su servidor Express, que son procesos independientes.
Descarga los ejemplos React y Express. Extráelos en carpetas hermanas, añade al ejemplo React los archivos del editor de prueba e instala y ejecuta cada ejemplo según su README. Ejemplo React · Ejemplo Express.
Inicia ambos servidores
Inicia el ejemplo Express en el puerto 5101 y el de React en el puerto 5111. El ejemplo React envía estas rutas a Express mediante un proxy. Este proxy es para desarrollo; en producción necesitas rutas equivalentes.
// /rte/ and /uploads/ go to the Express sample (node-express, port 5101).
// Keep the trailing slashes: "/rte" alone would also catch /rte-files.js.
proxy: {
"/rte/": "http://localhost:5101",
"/uploads/": "http://localhost:5101",
},Inspecciona la solicitud
En el panel de red del navegador, prueba por separado insertar, pegar y arrastrar una imagen. Si no hay solicitud, comprueba que se cargó el script y que ejecutas el ejemplo correcto. Una URL data significa que la imagen está integrada, no subida.
El ejemplo envía una solicitud multipart con el campo file y, opcionalmente, folder. Su controlador requiere el estado 200 y la propiedad url en JSON. Este es el contrato del ejemplo, no de todos los controladores personalizados.
Prueba el servidor
Prueba el endpoint directamente con una imagen de prueba real. El nombre de la respuesta es un ejemplo; abre la URL que devuelve tu servidor. No uses imágenes de clientes en pruebas públicas.
curl -F "file=@photo.jpg" http://localhost:5101/rte/upload
{"url":"/uploads/photo-ce99c014.jpg"}Un 400 puede indicar que falló la validación de la extensión o del contenido. Un 413 puede provenir del proxy, servidor web o límite de la aplicación. Para 401 o 403 revisa la sesión, CSRF y permisos de la carpeta. Una página HTML de inicio de sesión con estado 200 no es una carga correcta.
Comprueba la imagen guardada
Abre la URL de la imagen en el editor y en la página de lectura. Si aparece 404, revisa el proxy, prefijo de URL, archivos estáticos y almacenamiento persistente. Guarda y vuelve a cargar el documento; comprueba el origen de imagen guardado. Una URL blob es temporal y una URL data está integrada. No desactives la sanitización para mostrar una imagen.
Pide ayuda
Al contactar con soporte, incluye versión del editor, framework, acción, estado y respuesta sin datos sensibles. Elimina tokens, cookies, URL privadas y contenido del documento.