天天看点

ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h1_1">ueditor上传图片到七牛云存储</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h2_2">ueditor结合七牛传图片</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h2_3">七牛的试炼</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h3_4">开发前的准备与注意事项说明</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h2_5">Let's rock</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h2_6">与ueditor结合前的准备工作</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h3_7">首先从表单开始</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h3_8">生成token</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h3_9">建立图片空间</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h3_10">生成token</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h3_11">上传流程</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h2_12">集成ueditor</a>

<a href="http://my.oschina.net/duoduo3369/blog/174655#OSC_h3_13">将ueditor中的图片模块的在线管理功能和七牛结合</a>

重要说明,本人已不做java多年,请不要加qq再问我java的东东,欢迎提问python。

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

(图片-&gt;自己服务器-&gt;云存储)

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

很多开发网络应用的用户需要从他们自己的客户端访问七牛云存储。传统上,用户会将数据上传至他们的业务服务器,然后由业务服务器转发至云存储。这种做法增加了客户业务服务器的压力,并且增加了用户的流量成本。七牛云存储允许用户从客户端直接上传数据,而无需到业务服务器中转。这种模式具有更广泛的用途和灵活性。 在客户端直接上传数据的基础上,为方便用户业务服务器和客户端的信息交互,七牛云存储还提供了回调业务服务器的功能。用户可以在一次数据上传请求中,完成客户端和业务服务器的数据交换。在此基础上,七牛云存储还允许用户利用魔法变量和自定义变量设定回调中所传递的数据。

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

ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储

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

ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储
ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储

ok,找到里面的Config.java

ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储
ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储

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

七牛的上传流程如下图

ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储

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

ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储

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

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

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

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

ueditor上传图片到七牛云存储(form api,java)ueditor上传图片到七牛云存储

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