使用WangEditor富文本編輯器上傳圖片時(shí)，如果您的圖片下載接口需要攜帶請求頭，則直接使用URL插入圖片會(huì)失敗。本文將指導(dǎo)您如何解決這個(gè)問題。

問題：許多開發(fā)者在使用WangEditor時(shí)，發(fā)現(xiàn)直接使用類似process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0]這樣的方式拼接接口地址來插入圖片無效，因?yàn)榻涌谛枰囟ǖ恼埱箢^。嘗試將圖片下載到本地再獲取blob也無法解決問題。

根本原因：WangEditor的默認(rèn)圖片上傳機(jī)制無法處理需要請求頭的接口。簡單的URL拼接無法傳遞必要的請求頭信息。

解決方案：需要自定義WangEditor的圖片上傳功能，在自定義函數(shù)中手動(dòng)處理請求頭，并把獲取到的圖片數(shù)據(jù)傳遞給WangEditor。

具體步驟：

1. 查閱WangEditor文檔: 仔細(xì)閱讀WangEditor官方文檔中關(guān)于自定義圖片上傳的章節(jié)。這部分文檔詳細(xì)說明了如何自定義上傳函數(shù)。

2. 自定義上傳函數(shù): 使用fetch或axios等工具，編寫一個(gè)自定義的圖片上傳函數(shù)。在這個(gè)函數(shù)中：

   • 發(fā)送包含所需請求頭的請求到您的圖片下載接口。
   • 處理接口返回的圖片數(shù)據(jù)，將其轉(zhuǎn)換為WangEditor可接受的格式，例如Base64編碼或Blob。
   • 使用WangEditor提供的API將圖片數(shù)據(jù)插入到編輯器中。

示例代碼(使用fetch): (請根據(jù)您的實(shí)際接口和請求頭進(jìn)行調(diào)整)

// 自定義上傳函數(shù)
const customUpload = async (result) => {
  const url = process.env.VUE_APP_BASE_API   '/file/dwn2?fileName='   result[0];
  const headers = {
    // 添加您的請求頭
    'Authorization': 'Bearer your_token',
    // ... other headers
  };

  try {
    const response = await fetch(url, { headers });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const blob = await response.blob();
    const reader = new FileReader();
    reader.onload = (e) => {
      // 將Blob轉(zhuǎn)換為Base64
      const base64 = e.target.result;
      // 使用WangEditor API插入圖片 (具體方法請參考WangEditor文檔)
      editor.cmd.insertHTML(`<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="WangEditor中如何上傳需要請求頭的圖片？">`);
    };
    reader.readAsDataURL(blob);
  } catch (error) {
    console.error('圖片上傳失敗:', error);
    // 處理上傳錯(cuò)誤
  }
};

// 將自定義上傳函數(shù)配置到WangEditor
editor.customConfig.uploadImgServer = customUpload;
editor.create();

通過自定義上傳函數(shù)，您可以完全控制圖片上傳流程，確保請求頭被正確傳遞，從而成功在WangEditor中插入圖片。 記住替換示例代碼中的占位符為您的實(shí)際值。 請參考WangEditor的官方文檔獲取關(guān)于其API的更詳細(xì)的信息。

以上是WangEditor中如何上傳需要請求頭的圖片？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！