tinymce富文本编辑器如何实现上传图片

在项目中,前端会经常使用tinymce富文本编辑器插件,编辑器有上传图片的功能,而对于上传的这个图片的处理,有两种方式:

编辑器中有一个images_upload_handler方法,上传图片会触发该事件,该事件有3个参数,分别是上传图片的文件内容、上传成功的success处理方法、上传失败的failure处理方法。

方式一:上传图片时将文件流给后端,后端返回附件地址

复制代码
 1 images_upload_handler: (blobInfo, success, failure) => {
 2           let fd = new FormData();
 3           fd.append("file", blobInfo.blob());
 4           // 调接口,上传图片
 5           api.uploadImg(fd).then(response => {
 6    // 后端接口返回上传图片的访问地址
 7              let result = `${location.origin}/${response}`
 8    // 编辑器的上传图片内容被处理为<img src="success方法里面的参数" />
 9            success(result)
10           })
11         }
复制代码

方式二:上传图片时前端读取文件,转为base64格式,放在img的src中,不需要通过后端

1 images_upload_handler: (blobInfo, success, failure) => {
2           let base64 = "data:"+ blobInfo.blob().type + ";base64,"  + blobInfo.base64();// "data:image/png;base64," + blobInfo.base64();
3      //编辑器的上传图片内容被处理为<img src="success方法里面的参数" /> 
4    success(base64); 
5 }

 

 
posted @   蛙仔  阅读(6343)  评论(6编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示