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

 写在前面

这是一个数据爆发的网络时代,大家习惯于浏览图文直观带给我们的快速信息。大图片的存储和浏览经常会成为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来实现

 为单图上传所做的努力

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

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

 写在最后

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

为图片存储而作——记一次UEditor源码的修改的更多相关文章

  1. 百度编辑器UEditor源码模式下过滤div/style等html标签

    UEditor在html代码模式下,当输入带有<div style="">.<iframe>这类带有html标签的内容时,切换为编辑器模式后,会发现输入的内 ...

  2. 记一次ubuntuyu源码安装node.js

    1.官网下载源码 2.下载后解压,在终端打开,并进入文件夹 3../configure 这一步可谓是一波三折,先是没有Python 安装Python 又说没有G++,安装G++后终于成功执行./con ...

  3. 记一次RocketMQ源码导入IDEA过程

    首先,下载源码,可以官网下载source包,也可以从GitHub上直接拉下来导入IDEA.如果是官网下载的source zip包,直接作为当前project的module导入,这里不赘述太多,只强调一 ...

  4. 记一次ElementUI源码修改过程

    修改目的 使用ElementUI el-tree过程发现选中节点,键盘移动上下键时(key down\key up)el-tree默认高亮移动的节点,业务上需要重写此事件. ​从官网发现该事件没有暴露 ...

  5. 记一次UE4源码编译和游戏项目打包过程

    1.首先我们需要注册一个Epic账户,网址如下 http://api.unrealengine.com/CHN/GettingStarted/Installation/index.html#bookm ...

  6. Ueditor之前后端源码的学习和简单的研究

    这是我的项目目录 这里写图片描述 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调 ...

  7. TypeScript 源码详细解读(3)词法2-标记解析

    在上一节主要介绍了单个字符的处理,现在我们已经有了对单个字符分析的能力,比如: 判断字符是否是换行符:isLineBreak 判断字符是否是空格:isWhiteSpaceSingleLine 判断字符 ...

  8. Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供

    起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...

  9. Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供(转)

    起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...

随机推荐

  1. python常用正则表达式

    匹配特定数字:^[1-9]\d*//匹配正整数−[1−9]\d∗  //匹配负整数^-?[1-9]\d*//匹配整数[1−9]\d∗|0 //匹配非负整数(正整数 + 0)^-[1-9]\d*|0// ...

  2. Chapter 1 Mr.Sherlock Holmes

    I took my degree of Doctor of Medicine in the University of London, and proceeded to Netley to go th ...

  3. Opencv2系列学习笔记10(提取连通区域轮廓) 另一个

    http://blog.csdn.net/lu597203933/article/details/17362457 连通区域指的是二值图像中相连像素组成的形状.而内.外轮廓的概念及opencv1中如何 ...

  4. Entity Framework技巧系列之五 - Tip 16 – 19

    提示16. 当前如何模拟.NET 4.0的ObjectSet<T> 背景: 当前要成为一名EF的高级用户,你确实需要熟悉EntitySet.例如,你需要理解EntitySet以便使用 At ...

  5. 第13章 Swing程序设计

    1.Swing概述 GUI(图形用户界面)为程序提供图形界面,最初的设计目的是为程序员构建一个通用的GUI,使其能够在所有平台上运行.但Java 1.0中基础类AWT(抽象窗口工具箱)并没有达到这个要 ...

  6. 初识Iaas,paas

    Iaas(Infrastructure-as-a-service),直译为基础设备作为一种服务. Paas(Platform as a service),直译为平台作为一种服务. 暂且忘掉这两个单词, ...

  7. NavigationBar的显隐和颜色设置

    [self.navigationController setNavigationBarHidden:NO animated:NO]; self.navigationController.navigat ...

  8. 20160128_关于SVN提交不了并且还提示升级的解决方法

    因为是在项目中新增了文件夹,可能是直接在文件夹里放入文件,导致svn没有读取到文件信息,所以提交不了. 搞了一晚上,蛋疼死,解决方法:把新增的文件夹复制出来,删掉里面的 .svn文件夹.然后删掉项目里 ...

  9. navicat连接oracle时发现 ORA-12737 set CHS16GBK

    oracle安装目录下找到目录:\product\11.2.0\dbhome_1\BIN, 将箭头标注的三个文件(截图中为navicat中的目录,已经测试成功,亲们可以参考)从目录中拷贝纸navica ...

  10. Learning Java IO indexes

    I/O Streams, it simplifies I/O operations, write a whole object out to stream & read back. File ...