ueditor与七牛云存储结合

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

摘要:  ueditor与七牛云存储结合,主要是表单api.

ueditor上传图片到七牛云存储

ueditor结合七牛传图片

传统上,图片是存在自己的服务器上(图片->自己服务器),如果使用了云存储之后,有两种方式存到云端:

  • (图片->自己服务器->云存储)
  • (图片->云存储) 
    明显第二种节省自己服务器的压力,结合七牛来说就是使用七牛的form api。

很多开发网络应用的用户需要从他们自己的客户端访问七牛云存储。传统上,用户会将数据上传至他们的业务服务器,然后由业务服务器转发至云存储。这种做法增加了客户业务服务器的压力,并且增加了用户的流量成本。七牛云存储允许用户从客户端直接上传数据,而无需到业务服务器中转。这种模式具有更广泛的用途和灵活性。

在客户端直接上传数据的基础上,为方便用户业务服务器和客户端的信息交互,七牛云存储还提供了回调业务服务器的功能。用户可以在一次数据上传请求中,完成客户端和业务服务器的数据交换。在此基础上,七牛云存储还允许用户利用魔法变量和自定义变量设定回调中所传递的数据。

七牛的试炼

这次使用七牛SDK中的一些东西,结合jsp完成ueditor和七牛的结合。 
项目放在osc@git上,可以下载源码对照查看。

1 http://git.oschina.net/duoduo3_69/QiNiuWithUeditor.git

开发前的准备与注意事项说明

1.请将tomcat中server.xml里面context的path改为”“,这样访问时你的站点访问地址为http://你的域名/,(注意没有工程名字),例如:

1

2.因为ueditor上传文件使用的是swfuplod,使用云存储回调是flash需要查找你的网站有没有crossdomain.xml,所以请在WebContent放一个crossdomain.xml,这里提供一个简单的配置,如果有别的需求可以自行定制。

1  
2
3
4
5
6     domain="*" headers="*" />
7

Let's rock

与ueditor结合前的准备工作

首先从表单开始

1
2   
3   
4   
5   
6   ...
7

这段代码是七牛api里面给的,结合七牛的文档可以看出,表单api必须有两个字段,一个是token,一个是file,file也就是文件,token简单的说就是七牛验证你身份的一个加密编码的串,七牛上传的图片的action就是http://up.qiniu.com/。

ueditor与七牛云存储结合_第1张图片

生成token

token的生成有一套规则,官网api有介绍,结合七牛java的sdk非常简单就可以搞定。 
首先把sdk中需要的东西搞出来,因为不会用到里面所有的类,而且七牛sdk里面分了好多包,自己的项目七牛所有的东西我都扔在com.qiniu下,看着比较顺眼。

七牛的sdk 
ueditor与七牛云存储结合_第2张图片

需要用到的类和依赖的jar包(sdk是maven搞的,会自动下载,拖过来就行) 
ueditor与七牛云存储结合_第3张图片 
ueditor与七牛云存储结合_第4张图片

ok,找到里面的Config.java

01 public class Config {
02  
03     public static String USER_AGENT;
04  
05     /**
06      * You can get your accesskey from
07      * target="blank"> https://dev.qiniutek.com
08      */
09     public static String ACCESS_KEY = "";
10  
11     /**
12      * You can get your accesskey from
13      * target="blank"> https://dev.qiniutek.com
14      */
15     public static String SECRET_KEY = "";
16  
17     public static String RS_HOST = "http://rs.qbox.me";
18  
19     public static String UP_HOST = "http://up.qbox.me";
20  
21     public static String RSF_HOST = "http://rsf.qbox.me";
22  
23 }

把ACCESS_KEY,和SECRET_KEY这两个东西给填上,登录七牛,不要选择空间,然后点击账号设置就会看到密钥,粘到这个里面。 
ueditor与七牛云存储结合_第5张图片

建立图片空间

下一步在七牛空间里建一个空间,专门来存图片,请将空间设置为公开空间,根据七牛的规则,公开空间里面的文件都是外链直接可以访问的,而私用空间想要下载需要费一番功夫。因为我们需要把图片存在云里面供别人访问,所以将这个空间设置为公开即可。例如我的空间为duoduo。 
ueditor与七牛云存储结合_第6张图片

生成token

在sdk里面会发先有test这一组测试用的包,其中有一个Uptoken,这个就是用来生成token的,将里面的bucketName设置为你的图片空间,例如我的是duoduo。PutPolicy里面的参数请参照官网api。

01 package com.qiniu;
02  
03 import java.util.UUID;
04  
05 import org.json.JSONException;
06  
07 import com.qiniu.Mac;
08 import com.qiniu.Config;
09 import com.qiniu.PutPolicy;
10  
11 public class Uptoken {
12     public final static String makeUptoken() throws AuthException,
13             JSONException {
14  
15         Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY);
16         String bucketName = "duoduo";
17         PutPolicy putPolicy = new PutPolicy(bucketName);
18         // 可以根据自己需要设置过期时间,sdk默认有设置,具体看源码
19         // putPolicy.expires = getDeadLine();
20         putPolicy.returnUrl = "http://127.0.0.1/QiNiuCallback.jsp";
21         putPolicy.returnBody = "{\"name\": $(fname),\"size\": \"$(fsize)\",\"w\": \"$(imageInfo.width)\",\"h\": \"$(imageInfo.height)\",\"key\":$(etag)}";
22         String uptoken = putPolicy.token(mac);
23         return uptoken;
24     }
25  
26     /**
27      * 生成32位UUID 并去掉"-"
28      */
29     public static String getUUID() {
30         return UUID.randomUUID().toString().replaceAll("-", "");
31     }
32 }

上传流程

七牛的上传流程如下图

ueditor与七牛云存储结合_第7张图片

用户上传后,七牛怎样将上传结果返回给用户呢?有两种方式,简单的说一个是get方法传值,一个是post传值。returnUrl用的就是get(301跳转),而callbackUrl 则是post(异步回调)。

ueditor与七牛云存储结合_第8张图片 
ueditor与七牛云存储结合_第9张图片

可以看到我在Uptoken使用的是returnUrl,注意这里要写绝对路径,而returnBody里面可以参照api来设置,我在这里取了文件上传前的名字(name),现在的名字(key),并把他们拼成了json的格式,实际上仅仅需要key就可以和ueditor集成。另外,policy里面的deadline不需要操心,sdk里面有默认的设置,当然你也可以自行设置,不过注意,时间一定要大于当前时间*。

1 putPolicy.returnUrl = "http://127.0.0.1/QiNiuCallback.jsp";
2 putPolicy.returnBody = "{\"name\": $(fname),\"size\": \"$(fsize)\",\"w\": \"$(imageInfo.width)\",\"h\": \"$(imageInfo.height)\",\"key\":$(etag)}";

集成ueditor

ok,准备工作完毕,开始集成ueditor,上官网下载最新的jsp版本,当前为1.2.6.1 Jsp ,utf8版。解压,扔在项目里面WebContent。

找到ueditor.config.js这个配置文件,更改一些配置,使ueditor与七牛结合。

首先是URL,这是为了让项目能找到ueditor里面的一些文件,还记得注意事项里面说的将server.xml更改的问题吗,就是为了/ueditor/准备的,当然你也可以自行配置,不过可能会遇到一些路径的问题,比如returnUrl。

1 var URL = window.UEDITOR_HOME_URL || "/ueditor/";

然后是图片上传的部分,imageUrl就是七牛传图片的地址是http://up.qiniu.com/,imagePath则是用户访问图片的一个修正路径,从哪里找呢?在设置的图片空间(duoduo)里面的空间设置->域名设置那里查看,如图。七牛需要两个字段,一个是file,一个是token,file在ueditor中需要设置两次,第一次是在这里设置,第二次和token都在image.html里面设置,后面会说。

1 //图片上传配置区
2     ,imageUrl:"http://up.qiniu.com/"            //图片上传提交地址
3     ,imagePath:"http://duoduo.u.qiniudn.com/"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
4     //七牛结合需要改成file
5     ,imageFieldName:"file"

ueditor与七牛云存储结合_第10张图片

下一步,在index.html里面显示ueditor,没什么说的,代码如下。

01
02
03
04     
05     ueditor 七牛
06     
07     
08     
09
10
11     
12         
13     
14     
17
18

接下来,在ueditor/dialogs/image下找到image.html,这是图片上传的配置文件,image文件夹底下的东西都是和图片上传有关的,如果需要更高级的配置,请参照源码(image.js),结合ueditor.config.js里面的参数,进行操作。

image.html在这个文件加载的时候,我们需要从后台Uptoken那里拿到这次上传的token(token每次上传都是不一样的,因为他会自动加上deadline进行Base64编码),使用ajax,我用的是jquery。在image.html里面加了一个hidden的input框,暂时存一个变量,也就是需要传给七牛的token。

1

然后找到下面的标签,ajax取值,这里用的是一个Uptoken.jsp,后面介绍。注意我贴上的代码editor.setOpt部分有一个变量imageFieldName:“file”,这就是file的第二次修改地方。

01

你可能感兴趣的:(ueditor与七牛云存储结合)