百度编辑器上传图片后转到七牛存储
最近做项目遇到了需要把所有图片上传到七牛服务器，其中百度编辑器的图片也不例外。对于百度编辑器怎么使用就不说了，我之前也写过两篇使用遇到问题的文章。
其实之前使用百度编辑器上传的图片都是存到项目目录下的，所有这次要将图片分离也是费了我一点时间，下面我先说说我的思路再贴代码讲解吧。
其实使用百度编辑器会有几种上传图片的操作，一种是我上传了一张图片，但是我还没有提交内容，后来想想又把原图片删除了再上传一张新的后再提交；还有一种就是我上传了一张图片，后来把图片删了再提交（多张图片也是同理）。刚开始是想我直接在百度编辑器中的json文件里直接把图片路径改为七牛服务器的路径，但是后来想久一点发现根本不合理，因为如果没提交之前我有删除图片的操作我无法判断那个删除操作，那么我七牛服务器的照片还一样存在，这样就造成了没用的照片占据了空间（因为规定七牛不可以浪费内存。。。。），所有后来想到了一个我能实现也是比较合理的方法，那就是我先把图片直接存到项目下，创建一个临时文件夹专门存图片，等到表单提交的时候我再使用js把里面的所有<img>标签提取出来再传到后台慢慢处理，最后提交成功后就清空那个临时文件夹里面的图片，这样就保证了我七牛里面的都是有用的图片。
下面上代码一步步解析：
1：这里就是配置百度编辑器上传图片的路径，我在项目目录创建/static/image文件夹存临时图片，图片命名是12位数字年月日时分秒组成。
百度编辑器有个好处就是，你插入图片其实是插入一个<img>标签，而标签里面包含title和alt属性，title就是那12位数字，而alt就是你图片的原名字，这个对我们后面很重要！
2：页面使用js获取<img>标签，然后把标签作为隐藏字段传到后台处理
3：因为有可能编辑器是多张图片，所以后台接收其标签的时候要用数组接收
下面是把<img>标签内容弹框显示，观察就会发现title跟src图片的名称是一致的，这样我就可以根据title去临时文件夹找到对应图片再把此图片上传到七牛，存内容进数据库之前要替换掉src的路径为七牛服务器的图片路径，而我替换的方法就是利用字符串的截取替换完成先找到src="的位置再从此处找到下一个双引号，那么这区间就是图片路径了，就使用replace替换成七牛的路径再存到数据库
这些是具体操作的工具类，用到字符串的很多操作
4：上面找完图片上传完成跟替换地址完成后就是要删除临时文件里面的所有图片了
至此把百度编辑器的图片不冗余地上传到七牛就完成了，而且我本地也不冗余感觉这样处理还是比较合理的，如果有不懂的地方或者有更好的方法可以互相交流一下。此次编写是为了帮助跟我遇到同样问题的人更是方便以后自己回顾，因为我遇到这样的要求的时候也百度了很久都没参考的例子，看到有人提议通过临时文件夹就最后自己捣鼓了一天完成了这样的要求。
百度编辑器上传图片后转到七牛存储相关推荐
- ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...
<百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...
- 百度编辑器上传图片自定义路径，访问路径动态加载
在用百度编辑器时发现他以前的上传图片只能上传到项目的根目录下 这叫人很郁闷,在网上找了一些资料,现在记录一下. 1.首先在config.json中添加root路径,这里我起名叫uploadRoot字段 ...
- 百度编辑器上传图片添加水印方法
最近做项目,用的是百度编辑器,客户有个要求,上传图片的时候批量添加水印,基本上说我是菜鸟型的,百度半天找了好些方法,都不对,最后找到一个方法,测试了下,暂时没问题,把它记录下来,供大家参考. 1.打开 ...
- 最强markdown编辑器typora图床教程-七牛版
typora图床教程_七牛版 markdown编辑器中的王者typora,终于支持自动将图片上传到服务器,返回url了. 终于不用先把图片拖到图床里面再上传了.泪奔. 先来看看效果吧. 注意上面图片的 ...
- android 队列上传图片,话说android端七牛图片上传
七牛图片上传业务流程如下图(这是官方的图): 由上图可知,要想实现图片上传,是要三端进行交互的(我刚刚开始以为只要七牛服务器跟客户端交互就行) 接下来步骤如下: 1.首先肯定是要有一个七牛的账号,并创 ...
- ueditor百度编辑器上传图片出现后端未配置好，不能正常加载插件
项目使用百度编辑器,上传图片的时候出现后端未配置好,不能正常加载插件: 主要原因就是百度编辑器下面需要的几个jar并没有引用到项目的lib文件夹下 红框的这几个插件都需要加入到lib文件夹下,我的是m ...
- 百度编辑器上传图片时设置图片展示的最大宽度
我们公司制作常用的网站使用的是我们自己的cms,今天产品提了一个需求,希望在编辑器中上传图片时图片的最大宽度不要超过600px,在百度编辑器中上传图片有两种方式,单图上传和多图上传,而单图上传又分为点 ...
- 齐博php百度编辑器上传图片_齐博CMS整合百度编辑器上传附件的BUG以及解决办法...
齐博CMS作为目前PHP类CMS中最草根的CMS,能够及时的为站长们着想,将开源的百度编辑器整合进程序,这是值得广大站长欢呼雀跃的事情.但就目前来说,齐博CMS与百度编辑器的整合还是存在一些细小的问题 ...
- umeditor百度编辑器上传图片时自带域名怎么去除，解决办法
找到百度编辑器目录,umeditor\dialogs\image\image.js 这个js文件 的第37行附近. 注释掉原来的: // return arr.push({ // _src: ...
- 利用七牛存储7天远程自动备份LINUX服务器
受服务器空间制约,我们不可能在VPS上每天都备份一份新的网站数据,一是没必要,二是占空间.我们折中一下,采用星期命名,每次备份将覆盖上星期同一天的文件.从而只备份7份数据,不至于占用特别大的空间. 如 ...
最新文章
- kubenetes kubectl命令记录
- 洛谷P1541 乌龟棋
- MyBatis 源码解读-reflectorFactoryElement()
- 带你封装一个上传图片组件(ant design+react)
- docker 容器安装conposer_docker和php：将依赖项（composer）放入容器中
- js_md5加密和base64的加密解密
- Servlet如何上传文件? 戳这里
- 飞思卡尔9S12X系列双核中的协处理器XGATE使用方法
- 【BZOJ-1324】Exca王者之剑 最小割
- 28. Location replace() 方法
- flow-shop调度问题、job shop调度问题、open shop调度问题 是什么 区别
- 使用 Iperf 测试软路由性能
- 米聊PC版体验评测: 简约过头的即时聊天工具
- Aduino驱动SSD1306 OLED 显示图像
- C++ 输入输出（cin cout）加速/效率优化
- 侯捷C++学习记录-面向对象高级编程上
- JScript.NET或者JScript是什么？
- BootStrap栅格之间留出空隙
- 关于一些老手机打不开公司小程序，页面是一块白板，报错【系统繁忙，请稍后再试】。
- 人性26——让我的蠢猫通人性吧