画像アップロードの問題を解決する

まず、小さな PNG を 1 つ用意します。ブラウザーのネットワークパネルを開いて画像を挿入し、アップロードから保存された文書までリクエストを追跡します。これは顧客の下書きではなく、テスト用の文書で行ってください。

最初のセットアップ：画像の置き場所を決める

エディターはコンテンツを挿入し、アップロードされたファイルはアプリケーションが保存します。永続的なフォルダーまたはオブジェクトストレージを選び、アップロードのエンドポイントを設定して、ブラウザーからアクセスできる画像の URL を返してください。サーバーのディスク上のパスは、画像の URL ではありません。

まず、実行できるサーバーの言語ごとのデモから始めます。
インストールしているバージョン向けに説明されているアップロード用の URL またはカスタムハンドラーを使います。競合するハンドラーを登録しないでください。
アプリケーションでアップロードした画像を必須にする場合は、ファイル保存のセットアップに従って Base64 の埋め込みを無効にします。
画像の挿入、貼り付け、ドロップをそれぞれ別々に試します。保存して再読み込みし、読者が文書を閲覧するのと同じ環境で、保存された画像の URL を開きます。

症状を探す

アップロードのリクエストが表示されない

コンソールで初期化のエラーを確認し、エディターが使う前にハンドラーのスクリプトが読み込まれていたことを確認してください。HTML に data:image/ のソースが含まれている場合、画像はアップロードされずに埋め込まれています。デプロイしたつもりのファイルだけでなく、実際のエディターの設定を確認してください。

401 または 403：リクエストが拒否される

認証、CSRF の検証、フォルダーの認可を調べてください。ステータス 200 でログインページが返ってくる場合も、アップロードの失敗です。クロスオリジンのアップロードでは、両方のオリジンで Cookie と CORS の設定を確認してください。アクセスのチェックは有効のままにし、アプリケーションの認証済みのアップロードの流れを使ってください。

413：ファイルが大きすぎる

リバースプロキシ、Web サーバー、フレームワークのマルチパートの制限、アプリケーションの制限を確認してください。もっとも小さい制限が適用されます。想定している制限のすぐ下とすぐ上でテストしてください。ブラウザー側でサイズを変更すれば写真を小さくできますが、それでもサーバーの制限でエンドポイントを守る必要があります。

レスポンスは 200 なのに画像が表示されない

レスポンスの本文とコンテンツタイプを調べてください。成功のメッセージ、HTML のエラーページ、ファイルシステムのパスではなく、サポートされているレスポンスの形式に従っている必要があります。カスタムハンドラーの場合は、保存した URL またはエラーを渡して、完了のコールバックを 1 回だけ呼び出してください。

アップロードは成功するが、画像の URL が 404 を返す

返された URL を直接開いてください。公開 URL のプレフィックス、仮想ディレクトリ、大文字と小文字を区別するファイル名、静的ファイルの配信、永続的なストレージを確認します。相対 URL は、公開ページでは別のパスに解決されることがあります。エディターのページと読者のページの両方から URL をテストしてください。

再起動やデプロイの後に画像が消える

アップロードが、一時的なディレクトリや置き換えられるアプリケーションのディレクトリに書き込まれていないかを確認してください。永続的なストレージを使い、それをバックアップのポリシーに含めてください。デプロイによって、ユーザーのアップロードがデモパッケージのファイルで置き換えられてはいけません。

プレビューだけでなく、保存された文書を確認する

プレビューは、アップロードが終わる前に表示されることがあります。送信された HTML、保存された値、再読み込み後に返される HTML を読み取ってください。画像が最終的な URL を指していることを確認します。解決されていない blob: URL はブラウザーのセッションに属するもので、永続的なストレージではありません。

エディターでは画像が表示されるのに保存後に消える場合は、送信のタイミング、サーバーでの検証、HTML サニタイザーの画像に関するポリシーを確認してください。画像を表示させるためにサニタイズを無効にしてはいけません。画像を含むリッチテキストの保存を参照してください。

本番環境でのチェック

ファイルの種類、デコード後の寸法、サイズをサーバーで検証する。
保存名は生成し、アップロードされたパスやファイル名を信用しない。
アップロードとギャラリーへのアクセスに、ユーザーごとまたはテナントごとの権限を適用する。
非公開の画像は、認可された配信の背後に置く。エディターのページにログインが必要でも、公開 URL は公開されている。
成功だけでなく、拒否、キャンセル、遅い接続もテストする。

サポートに送るもの

エディターのバージョン、フレームワーク、最小限の設定、失敗する操作、HTTP ステータス、機密情報を伏せたレスポンスを含めてください。問題がアップロードの前、挿入の後、保存して再読み込みした後のどこで起きるかも明記してください。ログを共有する前に、Cookie、トークン、非公開の画像の URL、顧客のコンテンツは削除してください。

サーバーの例：ASP.NET Core、Web Forms と MVC、PHP。画像のドラッグ＆ドロップのデモも試してください。