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

转:http://my.oschina.net/duoduo3369/blog/174655

ueditor上传图片到七牛云存储

ueditor上传图片到七牛云存储

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

ueditor结合七牛传图片

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

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

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

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

七牛的试炼

这次使用七牛SDK中的一些东西,结合jsp完成ueditor和七牛的结合。 项目放在[email protected]上,可以下载源码对照查看。 http://git.oschina.net/duoduo3_69/QiNiuWithUeditor.git

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

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

<Context docBase="QiNiu" path="" reloadable="true" source="org.eclipse.jst.jee.server:QiNiu"/></Host>

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

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
<allow-http-request-headers-from
    domain="*" headers="*" />
</cross-domain-policy>

Let‘s rock

与ueditor结合前的准备工作

首先从表单开始

<form method="post" action="http://up.qiniu.com/" enctype="multipart/form-data">
  <input name="key" type="hidden" value="<resource key>">
  <input name="x:<custom_field_name>" type="hidden" value="<custom value>">
  <input name="token" type="hidden" value="<token>">
  <input name="file" type="file" />
  ...
</form>

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

生成token

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

七牛的sdk 

需要用到的类和依赖的jar包(sdk是maven搞的,会自动下载,拖过来就行)  

ok,找到里面的Config.java

public class Config {

    public static String USER_AGENT;

    /**
     * You can get your accesskey from <a href="https://dev.qiniutek.com"
     * target="blank"> https://dev.qiniutek.com </a>
     */
    public static String ACCESS_KEY = "<Please apply your access key>";

    /**
     * You can get your accesskey from <a href="https://dev.qiniutek.com"
     * target="blank"> https://dev.qiniutek.com </a>
     */
    public static String SECRET_KEY = "<Apply your secret key here, and keep it secret!>";

    public static String RS_HOST = "http://rs.qbox.me";

    public static String UP_HOST = "http://up.qbox.me";

    public static String RSF_HOST = "http://rsf.qbox.me";

}

把ACCESS_KEY,和SECRET_KEY这两个东西给填上,登录七牛,不要选择空间,然后点击账号设置就会看到密钥,粘到这个里面。 

建立图片空间

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

生成token

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

package com.qiniu;

import java.util.UUID;

import org.json.JSONException;

import com.qiniu.Mac;
import com.qiniu.Config;
import com.qiniu.PutPolicy;

public class Uptoken {
    public final static String makeUptoken() throws AuthException,
            JSONException {

        Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY);
        String bucketName = "duoduo";
        PutPolicy putPolicy = new PutPolicy(bucketName);
        // 可以根据自己需要设置过期时间,sdk默认有设置,具体看源码
        // putPolicy.expires = getDeadLine();
        putPolicy.returnUrl = "http://127.0.0.1/QiNiuCallback.jsp";
        putPolicy.returnBody = "{\"name\": $(fname),\"size\": \"$(fsize)\",\"w\": \"$(imageInfo.width)\",\"h\": \"$(imageInfo.height)\",\"key\":$(etag)}";
        String uptoken = putPolicy.token(mac);
        return uptoken;
    }

    /**
     * 生成32位UUID 并去掉"-"
     */
    public static String getUUID() {
        return UUID.randomUUID().toString().replaceAll("-", "");
    }
}

上传流程

七牛的上传流程如下图

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

 

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

putPolicy.returnUrl = "http://127.0.0.1/QiNiuCallback.jsp";
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。

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ueditor 七牛</title>
    <link rel="stylesheet" type="text/css" href="/QiNiu/ueditor/themes/default/css/ueditor.css"/>
    <script type="text/javascript" src="/QiNiu/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/QiNiu/ueditor/ueditor.all.js"></script>
</head>
<body>
    <div style="width:800px;margin:20px auto 40px;">
        <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script>
    </div>
    <script type="text/javascript">
        UE.getEditor(‘editor‘)
   </script>
</body>
</html>

接下来,在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。

<input id="qiniu_token" type="hidden" name="token" />

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

<script type="text/javascript">
    $(function(){
        $.get("/QiNiu/Uptoken.jsp", function(data) {
            $("#qiniu_token").val(data["token"]);
        });
    });
    //全局变量
    var imageUrls = [],          //用于保存从服务器返回的图片信息数组
        selectedImageCount = 0;  //当前已选择的但未上传的图片数量

    editor.setOpt({
        imageFieldName:"file",
        compressSide:0,
        maxImageSideLength:900
    });
    ......

ueditor怎么在图片上传的时候传附加的参数呢?首先找到utils.domReady(function()这个部分地下的ext:‘{"param1":"value1", "param2":"value2"}‘,,把这行注释掉,以为以前用的时候如果这行没注释自己的附加值传不过去。往下找在 $G("upload").onclick = function () {里面找到postParams,加上你想传的参数。

 var postParams = {
                "dir":baidu.g("savePath").value,
                "token":$("#qiniu_token").val()
            };

下面介绍上传和回调有关的两个jsp

* Uptoken.jsp,这是为了获得uptoken,并且把token包成json的。
* QiNiuCallback.jsp,七牛returnUrl的回调地址,需要将七牛的状态码转换为ueditor的状态码,这样才能正确显示。

Uptoken.jsp,使用org.json-chargebee-1.0.jar这个包,这是sdk里面自动下的。然后调用 Uptoken.makeUptoken()取到token放到json里面,ok。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="com.qiniu.*,org.json.JSONObject"%>
<%
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    response.setContentType("application/json");
    JSONObject json = new JSONObject();
    json.append("token", Uptoken.makeUptoken());
    response.getWriter().print(json.toString());
%>

现在你就可以上传了。传图之前,打开狐火firebug,查看网络面板里面查看网络的信息,当你点击开始上传按钮之后,就会看到网络面板里面七牛以301get方式回调你当时returnUrl里面设定的地址,打开七牛的空间可以看到你上传成功的图片。

QiNiuCallback.jsp,图片上传之后七牛主要有两种状态,一种是成功,一种是失败,成功就会按照你在policy里面设置的returnBody的格式回调,如果失败,则会返回一个json格式类似{"error":"错误信息"},而ueditor里面需要一个json格式的state来告诉他图片上传的状态,如果state是"SUCCESS",则ueditor认为此次上传成功,其余状态均为失败。所以我的回调jsp如下。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="com.qiniu.*,org.json.JSONObject"%>
<%
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    String upload_ret = request.getParameter("upload_ret");
    JSONObject callback = new JSONObject(Base64Coder.decode(upload_ret));
    JSONObject json = new JSONObject();
    if (callback.has("error")) {
        json.put("state", callback.get("error"));
    } else {
        json.put("original", callback.get("name"));
        json.put("url", callback.get("key")+"-v001");
        json.put("state", "SUCCESS");
    }
    response.getWriter().print(json.toString());
%>

在这里加了一个"v001",json.put("url", callback.get("key")+"-v001");这是什么呢?七牛会存你上传的原图,如果原图过大,显示效果可能不会很好,因此,可以使用七牛的缩略图功能。首先新建一个v001的缩略图模板(名字随便起)。在空间的数据处理,图片处理那个位置。 设置了缩略图之后怎么访问呢?就是原图的外链地址加上样式分隔符加上缩略图模板名字,例如图片的key为XXXAAA,样式分隔符为-,模板名为v001,则缩略图url为XXXAAA-v001。

另外Base64Coder.decode这个是解码的类,因为七牛在回调的时候回调的字符串也经过了Base64编码。sdk里面没找到解码的方法,需要加上这个解码的类,代码如下。

package com.qiniu;

import org.apache.commons.codec.binary.Base64;
import org.apache.commons.codec.binary.StringUtils;

public class Base64Coder {

    public static String decode(String s) {
        return StringUtils.newStringUtf8(Base64.decodeBase64(s));
    }

    public static String encode(String s) {
        return Base64.encodeBase64String(StringUtils.getBytesUtf8(s));
    }
}

至此,图片本地上传功能结束。

将ueditor中的图片模块的在线管理功能和七牛结合

第一步,更改ueditor.config.js,找到imageManagerUrl,虽然和ueditor里面的里面在线管理jsp的名字一样,不过请注意他的路径。imageManagerPath则是一个图片修正路径,和之前图片上传的修正路径对应。

    //图片在线管理配置区
    ,imageManagerUrl: "imageManager.jsp"       //图片在线管理的处理地址
    ,imageManagerPath:"http://duoduo.u.qiniudn.com/"

然后是imageManager.jsp,经过ueditor里面imageManager.jsp和Uploader.java两个文件的研究发现,imageManager.jsp实际上是会返回一个/图片aue_separate_ue/图片bue_separate_ue/图片cue_separate_ue的字符串,然后image.js会将这个串根据ue_separate_ue切割,并且在前面加上imageManagerPath组成最终的一个图片列表。搞明白机制之后不难根据七牛的sdk写出如下的代码。

<%@ page language="java" pageEncoding="utf-8"%>
<%@ page import="java.util.*,com.qiniu.*"%>
<%@ page import="java.io.*"%>
<%@ page import="javax.servlet.ServletContext"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<%
    Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY);
    RSFClient client = new RSFClient(mac);
    ListPrefixRet list = client.listPrifix("duoduo", "", "", 10);
    StringBuffer sb = new StringBuffer();
    for (ListItem item : list.results) {
        sb.append("/");
        sb.append(item.key);
        sb.append("ue_separate_ue");
    }
    String imgStr = sb.toString();
    if (imgStr != "") {
        imgStr = imgStr
                .substring(0, imgStr.lastIndexOf("ue_separate_ue"))
                .replace(File.separator, "/").trim();
    }
    out.print(imgStr);
%>

至此,ueditor和七牛云存储图片功能的全部整合就结束了。图片上传的配置主要在image.html里面。

时间: 2024-12-20 12:33:41

ueditor上传图片到七牛云存储(form api,java)的相关文章

第一次的go访问七牛云存储的api

官网看api,如何使用,对于第一次使用go语言的我略显吃力,嘿嘿,看了个demo就会了,而且超简单 package main import ( "fmt" . "github.com/qiniu/api/conf" "github.com/qiniu/api/fop"//这个地方是坑,网上的api.如果下载下来,请改本地地址,这里是网络地址,而且官网没提示要引用下面几个 "github.com/qiniu/api/io" &q

Kindeditor上传图片到七牛云存储插件(PHP版)

由于工作需要,要使用第三方存储作为图床,发现七牛云挺不错,又可以免费使用10G的空间,决定先试试. 项目中使用的是Kindeditor作为网页编辑器的,七牛云的插件里没有现成的Kindeditor的插件,开始是想看着官方提供的手册,自己开发下,结果不知道是我太笨还是手册太高深,结果愣是没看懂,后来迫于工作进度,差点决定要放弃Kindeditor使用Ueditor,毕竟有现成的插件可用,不过迫于对Kindeditor的热衷,最后还是坚持下来了,尽管没找到Kindeditor上传到七牛云的太多资料,

UEditor上传图片到七牛云储存(c#)

我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费额度很大,网上评价也挺好的,我就选了七牛 编辑器:我用的是百度的UEditor编辑器,之后需要修改一些的开放的类和js文件 下面写一下c#版本的修改方法(java版本在下一篇) 一.集成UEditor 1.在项目中加入UEditor 在UEditor的下载页,可以下载到最新的1.4.3.3 .Net

Ueditor上传图片到本地改造到上传图片到七牛云存储

作为新手说多了都是泪啊!我特别想记录一下作为菜鸟时的坑.看看以后是否会看着笑出来. 为什么要改到云存储上就不说了.好处多多. 视频教程上使用的又拍云同时也提到了七牛云.下来我自己也查了下.又拍云是试用7天.七牛云是免费的.免费的空间小点.对于学习来说小点没关系.所有就打算用它了.其实中间还有点小插曲.我比较喜欢小米.所有就连带着也喜欢金山.知道金山也有云.去看了看确实也不错.送的免费空间和七牛实名认证后的空间大小一样.还不用实名认证.七牛的实名认证如果只是身份证号的话就认了.居然要拿着身份证拍照

JavaWeb结合七牛云存储搭建个人相册

JavaWeb结合七牛云存储搭建个人相册 一.引言 1. 课程概述 相信很多人都知道网站一般会有很多图片,对于小型网站来说,图片放在网站服务器上不算什么,但当图片数量很大时,会造成服务器很臃肿,相应地对带宽要求也会提高,这就造成了成本的增加.其实现在已经流行云存储,我们可以把图片.大文件等放到第三方提供的云存储服务上,这会减少一部分成本.这门课程就介绍了JavaWeb结合七牛云存储来搭建个人相册服务. 2. 预备知识 掌握Servlet+JSP,能了解Bootstrap更好. 二.Just Do

JavaWeb结合七牛云存储搭建个人相册服务

JavaWeb结合七牛云存储搭建个人相册服务 一.引言1. 课程概述 相信很多人都知道网站一般会有很多图片,对于小型网站来说,图片放在网站服务器上不算什么,但当图片数量很大时,会造成服务器很臃肿,相应地对带宽要求也会提高,这就造成了成本的增加.其实现在已经流行云存储,我们可以把图片.大文件等放到第三方提供的云存储服务上,这会减少一部分成本.这门课程就介绍了JavaWeb结合七牛云存储来搭建个人相册服务. 2. 预备知识 掌握Servlet+JSP,能了解Bootstrap更好. 二.Just D

【UEditor】远程上传图片到【七牛云存储】

明晚更新 尽情期待. [UEditor]远程上传图片到[七牛云存储],布布扣,bubuko.com

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

最新下载地址: https://github.com/widuu/qiniu_ueditor_1.4.3 Ueditor七牛云存储版本 注意事项 老版本请查看 : https://github.com/widuu/qiniu_ueditor_1.4.3/tree/v1.0.0 关于地址报错 请修改 php/config.json 中的 uploadQiniuUrl 和 ChunkUploadQiniuUrl 参数,因为最近反馈地区错误报错比较多,举个简单的例子华南地区修改如下 "uploadQi

用ueditor上传图片、文件等到七牛云存储

ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll,我们可以看到以下东西: 其实Qiniu提供的SDK中,是可以利用文件流上传文件的. 所以,根据官方文档提供的案例,我们可以将上传改写成下面的样子: /// <summary> /// 上传文件 /// </summary> /// <param name="key&qu