React リッチテキストエディターの画像アップロードを診断する
小さなテスト画像とテスト文書を使用します。このガイドは React ギャラリーのサンプルと Express サーバーを対象とします。両者は別々のプロセスです。
React サンプルと Express サンプルをダウンロードします。同じ親フォルダーに展開し、試用版のエディターファイルを React サンプルに追加します。それぞれの README に従って依存関係をインストールし、起動します。 React サンプル · Express サンプル.
両方のサーバーを起動
Express サンプルをポート 5101、React サンプルをポート 5111 で起動します。React サンプルは次のパスを Express にプロキシします。これは開発用です。本番環境では同等のルーティングを用意してください。
// /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",
},リクエストを調べる
ブラウザーのネットワークパネルを開き、画像の挿入、貼り付け、ドラッグを別々に試します。リクエストがない場合は、アップロード処理のスクリプトと対応するサンプルを確認します。data URL はアップロードではなく埋め込みを示します。
サンプルは multipart リクエストに file フィールドと任意の folder フィールドを含めます。ハンドラーはステータス 200 と JSON の url を必要とします。これはサンプルの契約であり、すべてのカスタムハンドラーに共通する要件ではありません。
サーバーをテスト
実際のテスト画像でエンドポイントに直接リクエストします。返されるファイル名は例です。サーバーが返した URL を開いてください。公開テストに顧客の画像を使わないでください。
curl -F "file=@photo.jpg" http://localhost:5101/rte/upload
{"url":"/uploads/photo-ce99c014.jpg"}400 は拡張子またはファイル内容の検証エラーを示す場合があります。413 はプロキシ、Web サーバー、アプリのサイズ制限から返る場合があります。401 または 403 ではログイン、CSRF、フォルダー権限を確認します。ステータス 200 の HTML ログインページも成功ではありません。
保存後の画像を確認
返された画像 URL をエディターと閲覧ページの両方で開きます。404 ならプロキシ、URL プレフィックス、静的配信、永続ストレージを確認します。文書を保存して再読み込みし、保存された画像の参照先を調べます。blob URL は一時的で、data URL は埋め込みです。表示のためにサニタイズを無効にしないでください。
サポートに相談
サポートにはエディターのバージョン、フレームワーク、操作、ステータス、機密情報を除いた応答を共有します。トークン、Cookie、非公開 URL、文書内容は削除してください。