Diagnostiquer l’envoi d’images dans un éditeur React
Utilisez une petite image et un document de test. Ce guide concerne l’exemple de galerie React et son serveur Express, qui sont deux processus distincts.
Téléchargez les exemples React et Express. Extrayez-les dans deux dossiers voisins, ajoutez les fichiers de l’éditeur de la version d’évaluation à l’exemple React, puis installez les dépendances et démarrez chaque exemple selon son README. Exemple React · Exemple Express.
Démarrer les deux serveurs
Démarrez l’exemple Express sur le port 5101 et l’exemple React sur le port 5111. L’exemple React transmet les chemins suivants à Express. Ce proxy sert au développement ; prévoyez un routage équivalent en production.
// /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",
},Examiner la requête
Dans le panneau Réseau du navigateur, testez séparément l’insertion, le collage et le glisser-déposer. Sans requête, vérifiez le chargement du script d’envoi et l’exemple utilisé. Une URL data indique une image intégrée, non envoyée.
L’exemple transmet une requête multipart avec le champ file et éventuellement folder. Son gestionnaire exige le statut 200 et une propriété url dans le JSON. Ce contrat concerne l’exemple, pas tous les gestionnaires personnalisés.
Tester le serveur
Testez directement le point de terminaison avec une vraie image de test. Le nom retourné est un exemple ; ouvrez l’URL réellement renvoyée. N’utilisez pas une image client pour un test public.
curl -F "file=@photo.jpg" http://localhost:5101/rte/upload
{"url":"/uploads/photo-ce99c014.jpg"}Une réponse 400 peut indiquer une extension ou un contenu invalide. Une réponse 413 peut provenir du proxy, du serveur Web ou de la limite de l’application. Pour 401 ou 403, vérifiez la connexion, CSRF et les droits du dossier. Une page de connexion HTML avec le statut 200 ne constitue pas un envoi réussi.
Vérifier l’image après enregistrement
Ouvrez l’URL de l’image dans l’éditeur et sur la page de lecture. En cas de 404, vérifiez le proxy, le préfixe, le service de fichiers statiques et le stockage persistant. Enregistrez puis rechargez le document et vérifiez la source enregistrée. Une URL blob est temporaire ; une URL data est intégrée. Ne désactivez pas l’assainissement pour afficher une image.
Demander de l’aide
Pour contacter le support, indiquez la version de l’éditeur, le framework, l’action, le statut et une réponse expurgée. Retirez les jetons, cookies, URL privées et contenus du document.