WangEditor中如何上傳需要請求頭的圖片？

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

問題：許多開發者在使用WangEditor時，發現直接使用類似process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0]這樣的方式拼接接口地址來插入圖片無效，因為接口需要特定的請求頭。嘗試將圖片下載到本地再獲取blob也無法解決問題。

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

解決方案：需要自定義WangEditor的圖片上傳功能，在自定義函數中手動處理請求頭，並把獲取到的圖片數據傳遞給WangEditor。

具體步驟：

1. 查閱WangEditor文檔:仔細閱讀WangEditor官方文檔中關於自定義圖片上傳的章節。這部分文檔詳細說明瞭如何自定義上傳函數。

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

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

示例代碼(使用fetch ): (請根據您的實際接口和請求頭進行調整)

 // 自定義上傳函數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轉換為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('圖片上傳失敗:', error);
    // 處理上傳錯誤}
};

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

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

以上是WangEditor中如何上傳需要請求頭的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！