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

最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor。同时,我们的图片放在七牛云存储上。关于这两者间的集成,我写下一些个人的经验,与大家分享。

图片上传方案

目前来说,Web端基于七牛等云存储的图片上传方式分为以下两种:

1. 上传图片至服务端,再将数据转发至七牛。

通过服务端接受用户上传的内容,同时可以对内容进行有效性审核,拒绝不合规范的内容,然后从服务端将内容上传至七牛。

这种方法可以有效控制并记录用户提交的内容,但同时也增加了服务器的运行压力。

2. 直接上传图片至七牛,然后通知服务端。

消除了服务器带宽瓶颈的制约,利用CDN的优势大大提高了上传速度,同时利用七牛的Callback和魔法变量等特性,获取上传图片的基础信息。

很明显,第二种方案可以大大优化上传过程中的体验,同时也减轻了自有服务器的运行压力。

本文接下来将描述如何通过修改UEditor,来实现图片的直连上传。

服务端实现

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

1. UEditor配置下发

这部分没什么复杂的东西,就是把UEditor的配置文件按照要求放在服务端,具体方法可以参见后端部署说明以及源代码中ASP.NET部分的示例。

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

    /* 上传图片配置项 */
    "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}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

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

imageUrlPrefix: 图片路径的前缀

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

根据七牛的Form上传模型,客户端每次在上传图片之前,都需要获取该次上传事务中所用到上传令牌(token)。由于令牌的生成安全要求比较高,因此被设计成在服务端实现。

此处可以使用七牛提供的C#SDK加快开发效率。

    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();

这里需要注意两点

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

2. 针对第1点需求,我们利用了自定义内容响应(ReturnBody)以及魔法变量,自定义我们需要返回给客户端的字段信息。

修改UEditor代码

以下是上传流程的基本思路

1. 编辑器初始化,并从服务端获取配置信息

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

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

首先,我们来分析一下,UEditor使用中哪些场景会涉及到图片上传?

总结下来则分别是:单图上传,多图上传(图片管理器),直接把图片拖进编辑器上传。

我们先从多图上传(图片管理器)讲起。

1. 图片管理器上传

图片管理器的代码主要集中在dialogs/image/image.js

可以看到在编辑器初始化的时候有这样一段定义,其中actionUrl即上传服务器地址。

其中editor.getOpt(‘imageActionName‘)即表示从配置中读取imageActionName,查看服务端配置后得知该值被配置为"uploadimage"

很明显,这边是做了配置的集中化管理,因此我们找到_src/core/Editor.js并做修改,将涉及上传动作场景的请求地址均改为imageUrl,即七牛服务地址。

        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 ‘‘;
            }
        }

接下来我们回到dialogs/image/image.js,找到上传开始前的事件,此处附加上从服务端获取的七牛token,注意ajax是同步调用的。

2. 图片拖进编辑器上传

这部分代码主要集中在_src/plugins/autoupload.js

此处又看到了上传路径的配置,由于之前我们已经统一改过路径获取的代码了,所以这部分可以跳过

找到其执行上传的部分,与之前类似地附上获取token的代码

3. 单图上传

看似最简单的功能,其实留了个跨域的坑。我翻看了单图上传的代码,发现它的实现方法是建了个iframe,然后在里面使用表单上传。

此处可以参看官方文档关于表单上传请求跨域问题的解释,我暂时也没有时间深入研究。

时间: 2024-10-12 20:00:35

UEditor+七牛,实现图片直连上传的相关文章

七牛C#语言搭建javascript上传--包含后端请求token(前端javascript+后端c#)

Qiniu 七牛问题解答 很多用户反应不会自己搭建javascript的工程,因为涉及到请求服务端的token,在我的博客中包含了(javascript前端+后端java)的工程demao. 问题解决方案 点击这里写在完整的工程 1,首先你要打开你的vs,建一个asp.net的web项目.然后在你的网站建一个asp的web页面,拷贝以下代码进去: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=

从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文本web编辑器,而且全中文API和注释,方便学习和使用.特别是图片上传查看及涂鸦功能极为喜欢,但是有很多情况我们并不需要Web编辑器,而只需要图片上传.那么问题来了,提取图片上传哪家强..... 网上有很多图片上传的控件.插件.但都不是那么的完美,有的只有一张图片上传不包含批量上传,有的没有图片查看

图片、视频上传小记

我们开发中常用到图片上传,比如头像上传之类的,还有类似发布空间说说时发布多张图片等等,我在这里通过借鉴网络资源,并依赖于七牛云存储做了一个图片上传的小结. 我首先封装了一个图片上传的工具类,继承自nsobject,命名为QiniuTool:再多图上传时,还需要单张图片的上传结果处理,因此,我在这里有多创建了一个辅助工具类,命名为QiniuUploadHelper: 工具类类方法: #import <Foundation/Foundation.h> //上传 视频 .n 张图片 #import

CANVAS运用-对图片的压缩上传(仅针对移动浏览器)

最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等)上传时间过长会导致上传失败,而每次都上传原始大小的图片(后台处理压缩)十分影响用户体验,所以研究了一下通过canvas压缩图片并上传的方法,以下是整理的一些思路和心得: 一.<input type="file">获取本地图片,并将图片绘制到画布中.此处的难点在于:由于浏览器的

ueditor(1.4.3.2)提取单图上传功能

参照网络上流行的提取单图上传功能的方法并加以修改,主要通过创建提取的通用上传图片的js文件(custom.js)和简单修改UEditor的ueditor.all.js文件. 1)在自定义js custom.js中添加方法 var _editor = UE.getEditor('editor_img', {toolbars: [['simpleupload']]}); _editor.ready(function () { //设置编辑器不可用 //_editor.setDisabled(); 这

IE8升级新版Flash Player ActiveX14导致的discuz图片附件无法上传 解决方法

之前发的这篇文章被编辑之后丢失了,无奈从百度快照找来重新发布,不知道csdn抽啥风 架不住sb adobe的频繁升级提示,手欠升级到了了flash player 14,结果IE8下所有discuz论坛中都无法看到上传图片的按钮了 没办法,遇到问题就解决吧 刚好在解决IE11遇到编辑器不显示问题的时候看到discuz编辑器文件上传有非flash解决方案 所以这个问题看上去就不难了,把普通上传给打开就行了 编辑discuz文件/template/default/forum/editor_menu_f

HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这边的效果预览: 1.文件未选择 2.文件已选择 HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file"标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮. <div id

基于JSP+Servlet+JavaBean的图片或文件上传

基于JSP+Servlet+JavaBean的图片或文件上传 一.概述 现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?大家可以在在线视频课程进修学习<基于JSP+Servlet+JavaBean的人力资源管理系统开发>中第22课-项目开发-其它功能完善-图片

iOS开发——项目实战总结&amp;类微信朋友圈发动态功能初步-图片与视频上传

类微信朋友圈发动态功能初步-图片与视频上传 最近在做一个新的项目,涉及到了关于图片和视频上传和显示的功能,研究了一段时间,总结一下. 使用AFNetworking上传图片(可一次上传多张图片,包含不同类型png, jpeg)和视频 1 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; 2 3 AFHTTPRequestOperation *operation = [manager P