为图片存储而作——记一次UEditor源码的修改

2018-06-22 07:43:56来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

本文版权归博客园和作者吴双本人共同所有.

 写在前面

这是一个数据爆发的网络时代,大家习惯于浏览图文直观带给我们的快速信息。大图片的存储和浏览经常会成为Web服务器的瓶颈。试想如果你的Web服务器依然将大量图片存储在其本地,而单页面主要的信息在于图片列表,在访问量增长后,一定会面临带宽、磁盘IO的瓶颈。继而造成Web服务器缓慢,然后又要做分布式文件存储,如果说自己实现简易的多文件服务器存储,可以移步到这:http://www.cnblogs.com/tdws/p/6231308.html ,如果说自己搭建稍微复杂一些的,甚至带处理图片大小,像素,压缩和缓存的话,你可以移步Zimg  http://zimg.buaa.us/ 。

我目前采用的是七牛云存储,主要青睐于其容量和CDN,还有图片瘦身问题的解决。既然解决的问题是Web服务器瓶颈,那么一定要使用JS SDK, 就是JS直接将文件直传给七牛云。

 修改源码为了什么

 为了使用JS直接传输文件到云存储,而非通过文件传输到web服务器,再由web服务器post文件到云存储,因为后者的方式,实在是太不尽人意了,而且太low。

为了实现第一种方式,并且上传到云存储必须要携带认证的uptoken,才被认为是有权限的,所以不得不简单的修改一下源码,使得上传文件携带额外参数。

本次修改,主要实现了UEditor多文件上传到云存储。单文件上传UEditor使用iframe的方式,目前还没有解决,不过有了多文件上传,单文件的也显得不那么重要了。其实实现的思路很简单了,找到所有的图片上传的代码,并在上传前从web服务器获取uptoken, 然后将其携带给ajax。

首先修改的是Ueditor 图片弹出框所引用的image.js 

首先我将文件名给一个JS模拟生成的guid,然后请求Token,并设置为同步,在上传前,将token给到ajax请求所携带的data.这样一来上传的权限问题解决了。

第二步就是修改配置,config.json,重点在于imageUrl和imageUrlPrefix.

第三步,我发现在多图上传的时候,ueditor并没有使用我的imageUrl,而依然使用默认的本项目的路径。所以我通过搜索源码后找到位置,并做了如下修改:

这个方法名称叫做getActionUrl,增加一行判断,如果action为uploadImage时,使用我的imageUrl,作为上传的路径,而不做其他任何拼接,直接返回imageUrl。

 遇到的坑就是,七牛上传文件参数的key名称一定要是file。

另外百度富文本还要求了你上传后,服务起的返回格式,通过设置云存储的ReturnBody来实现

 

-------

2018-01-11更新:

如果你要支持截图的上传,还有一点需要注意,在上面第三步中,判断action的代码 改一下 

if (action == "uploadimage" || action == "catchimage") {
return imageUrl;
}

------

 为单图上传所做的努力

找了好久,找到了这段单图上传的源码,你可以看见其通过iframe和构造form对象。所以我做的修改就是请求token,并在success回调函数中给其加一个input,并把token作为value给到input标签。 

其上传的回调函数如下:抛出跨域异常的也正是这个位置,目前还没有解决,如果一定要实现的话,可能要参照下百度ueditor二次开发的文档。

 

 写在最后

其实也没有什么精彩的地方,不过相信使用云存储的人越来越多,一定还会有人需要,给自己个参考,也给他人一个参考。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:从ASP.NET Web API 2 (C#)开始说起

下一篇:asp.net mvc5轻松实现插件式开发