正文 

当前位置： 首页 > java > java教程

ueditor+七牛，实现图片直连上传

虚幻的街景 虚幻的街景     2022-08-30     469

关键词：

最近做的项目，涉及到使用富文本编辑器，我选择了百度的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"

很明显，这边是做了配置的集中化管理，因此我们找到ueditor/ueditor.all.js(可能低版本的ueditor在_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是同步调用的。此处将jquery通过ajax获取token，并放在data["token"]中

 

2. 图片拖进编辑器上传

这部分代码主要集中在ueditor/ueditor.all.js（旧版路径_src/plugins/autoupload.js）

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

找到其执行上传的部分，与之前类似地附上获取token的代码 加入红色代码

 

/* 创建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，然后在里面使用表单上传。

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

ueditor结合七牛云存储上传图片附件和图片在线管理的实现和最新更新

最新下载地址：https://github.com/widuu/qiniu_ueditor_1.4.3Ueditor七牛云存储版本注意事项老版本请查看: https://github.com/widuu/qiniu_ueditor_1.4.3/tree/v1.0.0关于地址报错请修改 php/config.json 中的 uploadQiniuUrl&nbs 查看详情

ueditor上传图片到七牛云存储（formapi,java）

转：http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情

ueditor1.4.3php如何上传图片到图片服务器（七牛）

...务器了，而且没有改图片名字。https://github.com/widuu/qiniu_ueditor_1.4.3想知道该如何修改，或者能不能不用他给的上传类而用我自己写的上传类，因为我之前已经写好了一个上传到七牛的类了，自己在表单上传可以，但不知道咋弄给u... 查看详情

初试“七牛云”--零基础运用七牛云配合ueditor实现图片的上传和浏览（.net篇）

（注册和建立存储空间就不介绍了，网上一把一把的资料，自己试着点点也能明白）作为一个成熟的菜鸟，如果遇到一个新问题，第一步当然是先百度一下。。。看了N个关于七牛云的使用的帖子，表示还是蒙圈的，看懂了一部... 查看详情

使用七牛接口实现图片和文件一键上传(代码片段)

本文主要介绍使用七牛提供的接口把七牛云作为图床，用Python实现图片上传和文件上传的脚本实现，可以支持按文件夹批量上传。搭建过网站的同学，一定都涉及到图片上传和文件上传的问题，最近为了弄图片资源接触了一下云... 查看详情

ueditor1.5版本单独调用图片上传如何实现？

ueditor1.5版本单独调用图片上传如何实现，网上找的添加修改image.jsfunctioninsertImage(imgObjs)editor.fireEvent('beforeInsertImage',imgObjs);editor.execCommand("insertImage",imgObjs);这个代码只适合老版本，新版本1.5的无效。在页面中引入UEdi... 查看详情

vue“欺骗”ueditor，实现图片上传(代码片段)

一、环境介绍@vue/cli4.3.1webpack4.43.0ueditor1.4.3.3jsp版二、springboot集成ueditor，实现分布式图片上传参考我的另一篇博客，《微服务迁移记（五）：WEB层搭建(5)-集成ueditor编辑器，伪分布式图片上传》配置完成后，有一个http://192.168.43.8... 查看详情

java实现七牛云文件或图片上传下载(代码片段)

文章目录一、准备工作1.1.为什么选择七牛云?1.2.七牛云注册二、java操作七牛云对象存储下载2.1.pom.xml引入依赖2.2.上传下载具体代码三、具体业务例子(七牛云做图片服务器--SpringBoot)3.1.pom.xml(此处继承上面的依赖多引入一个)3.2.创... 查看详情

ueditor之实现配置简单的图片上传示例(转)

...wenyi1010/article/details/51637427#comments 1.首先你可以到官网Ueditor，查看很详细的文档，包括如何安装到Eclipse，相关jar包和如何使用Ueditor，本文主要介绍如何实现单图片上传和利用自己的接口：运行tomcat上，在google浏览器运行（Tes... 查看详情

七牛云：ckeditorjssdk结合c#实现多图片上传。

成功了，搞了2天。分享一下经验。首先是把官方的那个例子下载下来，然后照如下的方式修改。其中tempValue是一个全局变量。functionsavetoqiniu(){ varuploader=Qiniu.uploader({ runtimes:"html5,flash,html4", browse_button:"setfile", save_key:false, //uptoken:q... 查看详情

ueditor单独图片上传

在UEditor里点击图片图标的时候先弹出属性框然后图片url地址栏旁边加一个按钮点击那个按钮的时候弹出选择图片窗口选完之后光把地址传到图片URL地址栏面点击确定的时候再吧信息发送到编辑器里面能实现吗？请大虾们帮帮搞... 查看详情

ueditor之实现配置简单的图片上传示例

UEditor之实现配置简单的图片上传示例原创 2016年06月11日18:27:31 开心一笑下班后，阿华到楼下小超市买毛巾，刚买完出来，就遇到同一办公楼里另一家公司的阿菲，之前与她远远的有过几次眼神交流，但从没说过话，“买... 查看详情

php版ueditor如何实现文章图片一起上传

就是这样的参考技术Aueditor里存放的是图片的url地址，提交时不用做任何处理的，只要你处理好异步上传图片路径的php处理文件就行了，就是返回的图片路径是绝对路径，放那里都没问题啦追问那如何获取图片的url，谢谢追答图... 查看详情

七牛云实现js上传

七牛云的官方API写的一塌糊涂。最主要的，还是版本兼容的问题。 一、引入文件引入了两个文件：1.jquery-1.10.2.min.js2.plupload.full.min.js3.qiniu.js版本太重要了。我提供了下载地址。二.html代码<pclass="tip1">本demo实现的图片预览... 查看详情

ueditor学习

1.UEditor之实现配置简单的图片上传示例2.UEditor之图片上传如何和真实项目结合 查看详情

最强markdown编辑器typora+图床七牛云实现图片自动上传(代码片段)

推荐阅读CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客QQ群：1040082875一、前言Typora首先介绍一下Typora，最强Markdown编辑器，风格简约，功能强大，特别是支持图片复制粘贴，现在又有了图片自... 查看详情

最强markdown编辑器typora+图床七牛云实现图片自动上传(代码片段)

推荐阅读CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客QQ群：1040082875一、前言Typora首先介绍一下Typora，最强Markdown编辑器，风格简约，功能强大，特别是支持图片复制粘贴，现在又有了图片自... 查看详情

thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos

参考技术AThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网站将图片上传至七牛云才能显著提升网站的响应速度,手把手交大家如何上配置ThinkPHP6上传文件至七牛云.然后我... 查看详情