Wangeditorでリクエストヘッダーを必要とする画像をアップロードする方法は？

Wangeditor Rich Text Editorを使用して画像をアップロードする場合、画像ダウンロードインターフェイスがリクエストヘッダーを携帯する必要がある場合、URLを使用して画像を直接挿入すると失敗します。この記事では、この問題を解決する方法について説明します。

問題：多くの開発者がWangeditorを使用する場合、 process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0]インターフェイスに特定のリクエストヘッダーが必要なため、画像を挿入するためにインターフェイスアドレスをスプライスすることは無効です。画像をローカルにダウンロードしてからBLOBを取得しようとすると、問題が解決できません。

根本原因：Wangeditorのデフォルトの画像アップロードメカニズムは、要求ヘッダーを必要とするインターフェイスを処理できません。単純なURLスプライシングは、必要な要求ヘッダー情報を渡すことができません。

解決策：Wangeditorの画像アップロード関数をカスタマイズし、リクエストヘッダーをカスタム関数で手動で処理し、取得した画像データをWangeditorに渡す必要があります。

具体的な手順：

1. Wangeditorドキュメントを確認してください。公式Wangeditorドキュメントでカスタム画像アップロードの章を注意深くお読みください。ドキュメントのこのセクションでは、アップロード機能のカスタマイズ方法について詳しく説明しています。

2. カスタムアップロード関数： fetchやaxiosなどのツールを使用して、カスタム画像アップロード機能を書き込みます。この関数では：

   • 必要なリクエストヘッダーを含むリクエストを画像ダウンロードインターフェイスに送信します。
   • インターフェイスによって返される画像データを処理し、Base64エンコードやBLOBなどのWangeditorに許容できる形式に変換します。
   • Wangeditorが提供するAPIを使用して、エディターに画像データを挿入します。

サンプルコード（ fetchを使用）：（実際のインターフェイスに従って調整し、ヘッダーをリクエストしてください）

 //カスタムアップロード関数const customupload = async（result）=> {
  const url = process.env.vue_app_base_api '/file/dwn2？filename =' result [0];
  const headers = {
    //リクエストヘッダーを追加する「承認」：「Bearer Your_Token」、
    // ...その他のヘッダー
  };

  試す {
    const response = await fetch（url、{headers}）;
    if（！respons.ok）{
      新しいエラー（ `httpエラー！status：$ {respons.status}`）;
    }
    const blob = await respons.blob（）;
    const reader = new fileReader（）;
    reader.onload =（e）=> {
      // blobをbase64に変換します
      const base64 = e.target.result;
      // Wangeditor APIを使用して画像を挿入します（特定の方法についてはWangeditorドキュメントを参照）
      editor.cmd.inserthtml（ ` <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Wangeditorでリクエストヘッダーを必要とする画像をアップロードする方法は？"> `）;
    };
    reader.readasdataurl（blob）;
  } catch（error）{
    console.error（ '画像アップロードfailed：'、error）;
    //アップロードエラーを処理}
};

// wangeditorにカスタムアップロード関数を構成します
editor.customconfig.uploadimgserver = customupload;
editor.create（）;

カスタムアップロード関数を使用すると、画像アップロードプロセスを完全に制御し、リクエストヘッダーが正しく渡されるようにし、Wangeditorに画像を正常に挿入することができます。実際の値として、サンプルコードのプレースホルダーを置き換えることを忘れないでください。 APIの詳細については、Wangeditorの公式ドキュメントを参照してください。

以上がWangeditorでリクエストヘッダーを必要とする画像をアップロードする方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。