Probleme beim Bild-Upload beheben

Beginnen Sie mit einem einzigen kleinen PNG. Öffnen Sie den Netzwerkbereich Ihres Browsers, fügen Sie das Bild ein und verfolgen Sie den Request vom Upload bis zum gespeicherten Dokument. Tun Sie das in einem Testdokument, nicht im Entwurf eines Kunden.

Ersteinrichtung: festlegen, wo Bilder liegen

Der Editor fügt Inhalte ein; Ihre Anwendung speichert hochgeladene Dateien. Wählen Sie einen persistenten Ordner oder Objektspeicher, konfigurieren Sie einen Upload-Endpoint und geben Sie eine Bild-URL zurück, die der Browser erreichen kann. Ein Pfad auf der Festplatte des Servers ist keine Bild-URL.

Beginnen Sie mit der lauffähigen Demo für Ihre Serversprache.
Verwenden Sie die Upload-URL oder den eigenen Handler, wie für Ihre installierte Version dokumentiert. Registrieren Sie keine konkurrierenden Handler.
Folgen Sie der Einrichtung der Dateispeicherung, um das Einbetten als Base64 abzuschalten, wenn Ihre Anwendung hochgeladene Bilder voraussetzt.
Fügen Sie ein Bild getrennt über Einfügen-Dialog, Zwischenablage und Drag & Drop ein. Speichern Sie, laden Sie neu und öffnen Sie die gespeicherte Bild-URL in dem Kontext, in dem Leser das Dokument sehen werden.

Ihr Symptom finden

Es erscheint kein Upload-Request

Prüfen Sie die Konsole auf Initialisierungsfehler und vergewissern Sie sich, dass das Handler-Skript geladen war, bevor der Editor es verwendet hat. Enthält das HTML eine Quelle data:image/, wurde das Bild eingebettet statt hochgeladen. Prüfen Sie die tatsächliche Editor-Konfiguration, nicht nur die Datei, die Sie bereitstellen wollten.

401 oder 403: Der Request wird abgelehnt

Untersuchen Sie Authentifizierung, CSRF-Validierung und Berechtigungen für Ordner. Auch eine mit Status 200 zurückgegebene Anmeldeseite ist ein fehlgeschlagener Upload. Bei Uploads über Origins hinweg prüfen Sie die Konfiguration von Cookies und CORS auf beiden Origins. Lassen Sie Zugriffsprüfungen eingeschaltet; verwenden Sie den authentifizierten Upload-Ablauf Ihrer Anwendung.

413: Die Datei ist zu groß

Prüfen Sie Reverse Proxy, Webserver, das Multipart-Limit des Frameworks und das Limit der Anwendung. Das kleinste Limit gewinnt. Testen Sie knapp unter und knapp über dem gewünschten Limit. Eine Verkleinerung im Browser kann Fotos verkleinern, die Limits auf dem Server müssen den Endpoint aber trotzdem schützen.

Antwort 200, aber kein Bild

Untersuchen Sie Body und Content Type der Antwort. Die Antwort muss einem unterstützten Antwortformat folgen und darf keine Erfolgsmeldung, HTML-Fehlerseite oder kein Dateisystempfad sein. Bei einem eigenen Handler rufen Sie dessen Abschluss-Callback genau einmal mit der gespeicherten URL oder einem Fehler auf.

Der Upload gelingt, dann gibt die Bild-URL 404 zurück

Öffnen Sie die zurückgegebene URL direkt. Prüfen Sie das öffentliche URL-Präfix, das virtuelle Verzeichnis, die Groß- und Kleinschreibung des Dateinamens, die Auslieferung statischer Dateien und die persistente Speicherung. Eine relative URL kann auf der veröffentlichten Seite unter einem anderen Pfad aufgelöst werden. Testen Sie die URL sowohl von der Editor-Seite als auch von der Leserseite aus.

Bilder verschwinden nach einem Neustart oder Deployment

Prüfen Sie, ob Uploads in ein temporäres oder ersetztes Anwendungsverzeichnis geschrieben wurden. Verwenden Sie persistenten Speicher und nehmen Sie ihn in Ihre Backup-Richtlinie auf. Ein Deployment sollte Uploads der Benutzer nicht durch Dateien aus einem Demopaket ersetzen.

Das gespeicherte Dokument prüfen, nicht nur die Vorschau

Eine Vorschau kann erscheinen, bevor der Upload abgeschlossen ist. Lesen Sie das gesendete HTML, den gespeicherten Wert und das HTML, das nach dem Neuladen zurückkommt. Vergewissern Sie sich, dass das Bild auf seine endgültige URL zeigt. Eine nicht aufgelöste blob:-URL gehört zu einer Browsersitzung; sie ist kein dauerhafter Speicher.

Funktionieren Bilder im Editor, verschwinden aber nach dem Speichern, prüfen Sie den Zeitpunkt des Absendens, die Validierung auf dem Server und die Bildrichtlinie Ihres HTML-Sanitizers. Schalten Sie die Bereinigung nicht ab, nur damit ein Bild erscheint. Siehe Rich Text mit Bildern speichern.

Prüfungen für die Produktion

Validieren Sie Dateityp, dekodierte Abmessungen und Größe auf dem Server.
Generieren Sie Speichernamen; vertrauen Sie keinen hochgeladenen Pfaden oder Dateinamen.
Wenden Sie Berechtigungen pro Benutzer oder pro Mandant auf Uploads und den Zugriff auf die Galerie an.
Liefern Sie private Bilder nur mit Berechtigungsprüfung aus; eine öffentliche URL ist öffentlich, auch wenn die Editor-Seite eine Anmeldung verlangt.
Testen Sie neben dem Erfolgsfall auch Ablehnung, Abbruch und eine langsame Verbindung.

Was Sie an den Support senden

Geben Sie Ihre Editor-Version, das Framework, eine minimale Konfiguration, die fehlschlagende Aktion, den HTTP-Status und eine geschwärzte Antwort an. Nennen Sie, ob das Problem vor dem Upload, nach dem Einfügen oder nach Speichern und Neuladen auftritt. Entfernen Sie Cookies, Tokens, private Bild-URLs und Kundeninhalte, bevor Sie Logs weitergeben.

Serverbeispiele: ASP.NET Core, Web Forms und MVC, PHP. Probieren Sie die Demo zu Bildern per Drag & Drop aus.