UEditor+七牛,实现图片直连上污染

近年来召开的种,涉及到利用方便文本编辑器,我采取了百度的UEditor。同时,大家的图纸在七牛云存储上。关于这两边间的三合一,我勾勒下有私的阅历,与大家大快朵颐。

 

图上污染方案

手上来说,Web端基于七牛等出口存储的图样上传方法分为以下简单种:

1. 达到传图片及服务端,再以数据转发到七牛。

由此服务端接受用户上传的始末,同时可对情节开展中用审核,拒绝不联合规范之情节,然后打服务端将内容上传至七牛。

这种办法好有效控制并记录用户提交的情,但以也平添了服务器的周转压力。

2. 直上污染图片及七牛,然后通告服务端。

脱了服务器带富瓶颈的制,利用CDN的优势大大进步了上污染速度,同时利用七牛的Callback和魔法变量等特性,获取上污染图片的功底信息。

颇明白,第二栽方案得以大大优化及污染过程被的心得,同时为减轻了自出服务器的周转压力。

正文接下去将讲述如何通过修改UEditor,来贯彻图片的直连上传。

 

服务端实现

服务端需要贯彻两独接口,分别是UEditor配置下发 和 七牛上传令牌下发。

1. UEditor配备下发

即刻部分不要紧复杂的物,就是拿UEditor的部署文件按要求在服务端,具体方法能够瞻仰后端部署表达暨源代码中ASP.NET部分的演示。

除此之外此之外,配置中还要修改以下内容

图片 1

    /* 上传图片配置项 */
    "imageUrl": "http://up.qiniu.com/",
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "file", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [  ".jpg", ".jpeg" ], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://7xkcdc.com2.z0.glb.qiniucdn.com/", /* 图片访问路径前缀 */
    "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

图片 2

imageUrl: 这里一直填七牛上传服务的地址

imageUrlPrefix: 图片路径的前缀

 

2. 拐牛上传令牌(Token)下发

基于七牛之Form上传模型,客户端每一回在上传图片前,都需得到该次上传事务中所用到直达传令牌(token)。由于令牌的转安全要求于高,因而被规划成在服务端实现。

这里可以动用七牛提供的C#SDK加快开发效能。

图片 3

    var key = MakeKey();  //生成key
    var ret = new
    {
        url = "$(key)",
        key = "$(key)",
        w = "$(imageInfo.width)",
        h = "$(imageInfo.height)",
        state = "SUCCESS"
    };

    var policy = new PutPolicy(Bucket)
    {
        SaveKey = key,
        ReturnBody = JsonConvert.SerializeObject(ret)
    };

    return policy.Token();

图片 4

此间需要小心少接触

1.
根据UEditor二次开发后端请求规范,UEditor需要以上传成功后服务端重临state和url字段,即:需要七牛再次来到以上字段。

2.
针对第1触及需要,大家接纳了从定义内容应(ReturnBody)以及魔法变量,自定义我们要回到给客户端的字段音讯。

  

修改UEditor代码

以下是高达传流程的基本思路

  1. 编辑器开始化,并自服务端获取配置音信

  2. 开端上传前,从服务端获取七牛令牌,并附加到上传的求中

  3. 上传图片及七牛服务器

 

首先,大家来分析一下,UEditor使用被咋样场景会涉及到图片上传?

图片 5

总括下则分别是:单图上污染,多图及传(图片管理器),直接拿图片拖上编辑器上传。

俺们事先打多图及污染(图片管理器)讲起。

 

1. 图纸管理器上污染

图形管理器的代码重要汇聚在dialogs/image/image.js

可以看出在编辑器起首化的时爆发这么同样段定义,其中actionUrl即上传服务器地址。

图片 6 

个中editor.getOpt(‘imageActionName’)即表示于布局中读取imageActionName,查看服务端配置后查出该值被部署为”uploadimage”

坏肯定,这边是召开了部署的集中化管理,由此大家找到ueditor/ueditor.all.js(可能小版本的ueditor在_src/core/Editor.js中修改)并做修改,将涉嫌上传动作场景的请求地址都改呢imageUrl,即七牛服务地点。

图片 7

        getActionUrl: function(action) {
            var actionName = this.getOpt(action) || action,
                imageUrl = this.getOpt('imageUrl'),
                serverUrl = this.getOpt('serverUrl');
/*加上红色代码*/
            if (action == "uploadimage") {
                return imageUrl;
            }

            if (!serverUrl && imageUrl) {
                serverUrl = imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2');
            }

            if (serverUrl) {
                serverUrl = serverUrl + (serverUrl.indexOf('?') == -1 ? '?' : '&') + 'action=' + (actionName || '');
                return utils.formatUrl(serverUrl);
            } else {
                return '';
            }
        }

图片 8

 接下来我们回来dialogs/image/image.js,找到上传开首前的波,此处附加上于服务端获取之七牛token,注意ajax是同步调用的。此处将jquery通过ajax获取token,并居data[“token”]中

图片 9

 

2. 图纸拖上编辑器上传

顿时一部分代码紧要汇集在ueditor/ueditor.all.js(旧版路径_src/plugins/autoupload.js)

此地又望了上传路径的部署,由于从前大家曾经统一改了路径获取之代码了,所以这一部分足超过了

图片 10

找到该尽上传的一部分,与事先好像地蹭获取token的代码 出席绿色代码

图片 11

 

/* 创建Ajax并提交 */
var xhr = new XMLHttpRequest(),
fd = new FormData(),
params = utils.serializeParam(me.queryCommandValue(‘serverparam’)) ||
”,
url = utils.formatUrl(actionUrl + (actionUrl.indexOf(‘?’) == -1 ?
‘?’:’&’) + params);

fd.append(fieldName, file, file.name || (‘blob.’ +
file.type.substr(‘image/’.length)));
fd.append(‘type’, ‘ajax’);

 $.ajax({

dataType:”json”,

async:false,

url:”../upload/token”,

success:function(res){

fd.append(“token”,res.token);

  }  

});

xhr.open(“post”, url, true);
xhr.setRequestHeader(“X-Requested-With”, “XMLHttpRequest”);

3. 单图上污染

好像太简易的法力,其实留了单跨域的坑。我翻译看了单图上传的代码,发现它们的落实格局是建造了单iframe,然后在里用表单上传。

此地可以参考官方文档关于表单上传请求跨域问题的诠释,我少为没时间深切研讨。

相关文章