使用WangEditor富文本編輯器上傳圖片時，如果您的圖片下載接口需要攜帶請求頭，則直接使用URL插入圖片會失敗。本文將指導您如何解決這個問題。
問題：許多開發者在使用WangEditor時，發現直接使用類似process.env.vue_APP_BASE_API + ‘/file/dwn2?fileName=’ + result[0]這樣的方式拼接接口地址來插入圖片無效，因為接口需要特定的請求頭。嘗試將圖片下載到本地再獲取blob也無法解決問題。
根本原因：WangEditor的默認圖片上傳機制無法處理需要請求頭的接口。簡單的URL拼接無法傳遞必要的請求頭信息。
解決方案：需要自定義WangEditor的圖片上傳功能，在自定義函數中手動處理請求頭，并把獲取到的圖片數據傳遞給WangEditor。
具體步驟：
-
查閱WangEditor文檔: 仔細閱讀WangEditor官方文檔中關于自定義圖片上傳的章節。這部分文檔詳細說明了如何自定義上傳函數。
-
自定義上傳函數: 使用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(`@@##@@`); }; reader.readAsDataURL(blob); } catch (error) { console.error('圖片上傳失敗:', error); // 處理上傳錯誤 } }; // 將自定義上傳函數配置到WangEditor editor.customConfig.uploadImgServer = customUpload; editor.create();
通過自定義上傳函數，您可以完全控制圖片上傳流程，確保請求頭被正確傳遞，從而成功在WangEditor中插入圖片。 記住替換示例代碼中的占位符為您的實際值。 請參考WangEditor的官方文檔獲取關于其API的更詳細的信息。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
