使用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的更详细的信息。
