WangEditor插入带请求头图片的解决方案
在使用WangEditor富文本编辑器时，插入需要特定请求头的图片是一个常见问题。例如，图片下载接口可能需要身份验证等请求头才能正常访问。直接使用图片URL插入会导致图片无法显示。本文提供一种解决方法。
问题：开发者尝试直接使用下载接口URL插入图片，代码如下：
customInsert: (insertImg, result, editor) => {
insertImg(process.env.VUE_APP_BASE_API + '/file/dwn2?fileName=' + result[0])})
由于/file/dwn2接口需要请求头，图片无法加载。尝试下载到本地再插入也无效。
解决方案：在插入图片前，使用正确的请求头获取图片数据，然后以合适的格式(例如base64或Blob)传递给WangEditor的insertImg方法。这需要理解WangEditor的API和图片上传机制。 官方文档提供了图片上传和自定义插入的详细配置，仔细阅读可找到解决方法。
步骤：
-
发送带请求头的请求： 使用
fetch或axios等方法，发送请求到图片下载接口，并包含必要的请求头(例如Authorization)。 -
处理响应： 获取响应中的图片数据。
-
转换为合适的格式： 将图片数据转换为base64或Blob格式。 base64编码适合小图片，Blob适合大图片，避免内存溢出。
-
使用
insertImg插入： 将转换后的图片数据传递给WangEditor的insertImg方法。 如果使用base64，直接传入base64字符串；如果使用Blob，则需要创建一个FileReader对象读取Blob并将其转换为base64后再传入。
示例代码（使用fetch和base64）： (请根据实际接口和请求头进行调整)
customInsert: async (insertImg, result, editor) => {
const url = process.env.VUE_APP_BASE_API + '/file/dwn2?fileName=' + result[0];
const response = await fetch(url, {
headers: {
'Authorization': 'Bearer your_token' // 替换为你的token
}
});
const blob = await response.blob();
const reader = new FileReader();
reader.onloadend = () => {
const base64 = reader.result;
insertImg(base64);
};
reader.readAsDataURL(blob);
};
通过以上步骤，可以正确地将需要请求头的图片插入到WangEditor富文本编辑器中。 记住查阅WangEditor官方文档，以获取更详细的API和配置信息。
