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

时间 2019-11-17

标签 ueditor 上传图片七牛 7牛存储 form api java 栏目 Java 繁體版

原文原文链接

ueditor上传图片到七牛云存储

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

ueditor结合七牛传图片

传统上，图片是存在本身的服务器上(图片->本身服务器)，若是使用了云存储以后，有两种方式存到云端：css

(图片->本身服务器->云存储)
(图片->云存储) 明显第二种节省本身服务器的压力，结合七牛来讲就是使用七牛的form api。

不少开发网络应用的用户须要从他们本身的客户端访问七牛云存储。传统上，用户会将数据上传至他们的业务服务器，而后由业务服务器转发至云存储。这种作法增长了客户业务服务器的压力，而且增长了用户的流量成本。七牛云存储容许用户从客户端直接上传数据，而无需到业务服务器中转。这种模式具备更普遍的用途和灵活性。html

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

七牛的试炼

此次使用七牛SDK中的一些东西，结合jsp完成ueditor和七牛的结合。项目放在osc@git上，能够下载源码对照查看。 http://git.oschina.net/duoduo3_69/QiNiuWithUeditor.gitpython

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

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

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

2.由于ueditor上传文件使用的是swfuplod，使用云存储回调是flash须要查找你的网站有没有crossdomain.xml，因此请在WebContent放一个crossdomain.xml，这里提供一个简单的配置，若是有别的需求能够自行定制。ajax

<?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结合前的准备工做apache

###首先从表单开始json

<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里面。