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 }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库