百度编辑器上传图片后转到七牛存储

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37762923/article/details/80213269

       最近做项目遇到了需要把所有图片上传到七牛服务器,其中百度编辑器的图片也不例外。对于百度编辑器怎么使用就不说了,我之前也写过两篇使用遇到问题的文章。

      其实之前使用百度编辑器上传的图片都是存到项目目录下的,所有这次要将图片分离也是费了我一点时间,下面我先说说我的思路再贴代码讲解吧。

      其实使用百度编辑器会有几种上传图片的操作,一种是我上传了一张图片,但是我还没有提交内容,后来想想又把原图片删除了再上传一张新的后再提交;还有一种就是我上传了一张图片,后来把图片删了再提交(多张图片也是同理)。刚开始是想我直接在百度编辑器中的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:上面找完图片上传完成跟替换地址完成后就是要删除临时文件里面的所有图片了




至此把百度编辑器的图片不冗余地上传到七牛就完成了,而且我本地也不冗余感觉这样处理还是比较合理的,如果有不懂的地方或者有更好的方法可以互相交流一下。此次编写是为了帮助跟我遇到同样问题的人更是方便以后自己回顾,因为我遇到这样的要求的时候也百度了很久都没参考的例子,看到有人提议通过临时文件夹就最后自己捣鼓了一天完成了这样的要求。

猜你喜欢

转载自blog.csdn.net/weixin_37762923/article/details/80213269