在使用WangEditor富文本编辑器时，插入需要请求头的图片是一个常见难题。直接使用接口地址往往导致图片无法显示，因为WangEditor本身不处理请求头。本文提供解决方案。
问题：开发者尝试使用customInsert方法直接插入图片下载接口（例如/file/dwn2?fileName=），但由于接口需要请求头，图片无法加载。 即使尝试下载到本地再获取Blob URL也无效。
解决方案：关键在于不能直接将接口地址传递给WangEditor。 正确的做法是：
使用fetch或axios等方法，在customInsert函数中，携带必要的请求头向服务器发起请求。 这步获取图片的二进制数据（Blob）。
将获取到的Blob数据转换成DataURL。 DataURL是WangEditor能够识别的图片格式。
Clipfly
一站式AI视频生成和编辑平台，提供多种AI视频处理、AI图像处理工具。
129 查看详情
使用insertImg方法将DataURL插入到编辑器中。
示例代码（使用fetch）：
editor.customInsert = function(file, insertFn) { const url = '/file/dwn2?fileName=' + file.name; const headers = { // 你的请求头 'Authorization': 'Bearer your_token', // ... other headers }; fetch(url, { headers }) .then(response => response.blob()) .then(blob => { const reader = new FileReader(); reader.onloadend = function() { insertFn(reader.result); // 将DataURL传递给insertFn }; reader.readAsDataURL(blob); }) .catch(error => { console.error('图片加载失败:', error); });};
请替换/file/dwn2?fileName=为你的实际接口地址，并根据你的接口需求填写正确的请求头headers。 这个示例代码展示了如何使用fetch API，你也可以根据需要使用axios或其他方法。
记住查阅WangEditor官方文档，了解自定义图片插入的详细配置和示例，以便更好地集成此功能。 这将确保你的代码与WangEditor的最新版本兼容，并获得最佳性能。
以上就是如何在WangEditor中插入需要请求头的图片？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/757871.html
微信扫一扫 
支付宝扫一扫 
