UEditor上传图片到七牛云储存(java)
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿
云储存:普遍说又拍云和七牛比较好,看到七牛免费额度很大,网上评价也挺好的,我就选了七牛
编辑器:我用的是百度的UEditor编辑器,之后需要修改一些的开放的类和js文件
下面写一下java版本(maven)的修改方法(c#版本在上一篇)
一、集成UEditor
1、在项目中加入UEditor
在UEditor的下载页,可以下载到最新的1.4.3.3 Jsp版本(UTF-8),把解压出的文件夹放进项目
2、在项目中加入UEditor的后端程序
在UEditor的下载页,下载1.4.3.3 完整源码(里面有jsp版后端的源码),因为上面jsp版里的只有UEditor的jar包,引用jar包的话就改不了了,所以我们还是把源码放进项目来改
把ueditor1_4_3_3-src.rar -> jsp -> src里的com文件夹拷进项目,然后在maven的pom.xml里引用:
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160212</version>
</dependency>
3、将UEditor嵌入页面
新建一个页面,内容是:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UEditor上传图片到七牛(java)</title>
<script type="text/javascript">
window.UEDITOR_HOME_URL = '/demo/UEditor/';
</script>
<script src="/demo/UEditor/ueditor.config.js" type="text/javascript"></script>
<script src="/demo/UEditor/ueditor.all.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/plain" id="editor" name="editContent" style="width:600px; height:300px;"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
</form>
</body>
</html>
4、运行效果
最后的文件目录:
页面的运行效果:
二、集成七牛sdk
在maven的pom.xml里引用:
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.0.8</version>
</dependency>
三、上传图片到七牛
1、添加QiniuHelper.cs帮助类
这是为了接下来方便修改写的一个工具类,使用它可以省一些重复代码
package org.xs.demo; import java.io.File;
import java.util.UUID; import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth; /**
* 七牛上传帮助类
*/
public class QiniuHelper { /**
* 空间名
*/
private static String Scope = "xxxx"; /**
* 域名
*/
private static String Url = "xxxxxxxxx.bkt.clouddn.com"; /**
* 公钥
*/
private static String ACCESS_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; private static String SECRET_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; /**
* 上传附件
* @throws QiniuException
*/
public static String UploadFile(File file) throws QiniuException { String key = UUID.randomUUID().toString().replaceAll("-", ""); try {
//创建上传对象
UploadManager uploadManager = new UploadManager(); //密钥配置
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY); //上传文件
Response res = uploadManager.put(file, key, auth.uploadToken(Scope, key));
} catch (Exception e) {
return "";
}
return key;
} /**
* 获得url地址
*/
public static String GetUrl(String key)
{
return String.format ("http://%s/%s", Url, key);
}
}
Scope是存储空间的名称
Url是存储空间的域名(也可以用自己的正式域名)
ACCESS_KEY和SECRET_KEY是用户的一对密钥,在个人面板 -> 个人中心 -> 密钥管理 界面中可以创建、查看
这几个参数也可以写成从配置文件读取的
2、修改StorageManager.java类
找到com.baidu.ueditor/upload/StorageManager.java类,找到以下代码:
state = saveTmpFile(tmpFile, path); if (!state.isSuccess()) {
tmpFile.delete();
}
修改成:
//state = saveTmpFile(tmpFile, path); //存储文件到七牛
String key= QiniuHelper.UploadFile(tmpFile); state = new BaseState(true);
state.putInfo("size", tmpFile.length());
state.putInfo("title", tmpFile.getName());
state.putInfo("url", QiniuHelper.GetUrl(key)); //if (!state.isSuccess()) {
tmpFile.delete();
//}
3、修改BinaryUploader.java类
找到com.baidu.ueditor/upload/BinaryUploader.java类,找到以下代码:
storageState.putInfo("url", PathFormat.format(savePath));
注释掉它
//storageState.putInfo("url", PathFormat.format(savePath));
4、修改UEditor的配置
(1)、关闭自动本地保存
找到UEditor\ueditor.all.js文件,查找"'contentchange': function () {",在这个函数内增加代码:
'contentchange': function () { //关闭自动本地保存
if (!me.getOpt('enableAutoSave')) {
return;
}
这样就不会经常跳出烦人的提示框了
5、图片上传运行效果
最后测试一下图片上传是否成功
单图片上传:
内容里src已经变成了七牛的地址了
再看多图片上传:
7、demo下载
最新的代码地址:https://github.com/ctxsdhy/cnblogs-example
四、其他扩展
这是我的博客里面使用的,设置所有图片尺寸和加入相册功能,其实就是在UEditor里修改几处js,然后增加一个加入相册服务
方法暂时不整理了,博客的代码在这里:https://github.com/ctxsdhy/xsblog(c#)
UEditor上传图片到七牛云储存(java)的更多相关文章
- UEditor上传图片到七牛云储存(c#)
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
- ueditor上传图片到七牛云存储(form api,java)
转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 ...
- UEditor上传图片到七牛C#(后端实现)
由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1 免费10G 的容量 ,对个人网站足够用 2 规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...
- ElementUI的Upload上传,配合七牛云储存图片
七牛云服务器的储存区域 存储区域 地域简称 上传域名 华东 z0 服务器端上传:http(s)://up.qiniup.com 华东 z0 客户端上传: http(s)://upload.qiniup ...
- 上传图片到七牛云(服务端 node.js sdk)
大体思路 前端要上传图片到七牛云,需要有一个token进行授权操作,而获取这个上传的upload token(以下简称upToken),在服务端需要一定的身份校验,比如说:只有登录的vip用户才能拿到 ...
- js上传图片到七牛云存储
项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...
- TP5上传图片到七牛云,并且删除七牛云的图片
一,通过composer 下载七牛云 sdk composer require qiniu/php-sdk 二,手动下载七牛云sdk 1,https://developer.qiniu.com/kod ...
- Ueditor上传图片到本地改造到上传图片到七牛云存储
作为新手说多了都是泪啊!我特别想记录一下作为菜鸟时的坑.看看以后是否会看着笑出来. 为什么要改到云存储上就不说了.好处多多. 视频教程上使用的又拍云同时也提到了七牛云.下来我自己也查了下.又拍云是试用 ...
- Kindeditor上传图片到七牛云存储插件(PHP版)
由于工作需要,要使用第三方存储作为图床,发现七牛云挺不错,又可以免费使用10G的空间,决定先试试. 项目中使用的是Kindeditor作为网页编辑器的,七牛云的插件里没有现成的Kindeditor的插 ...
随机推荐
- unity3d 三分钟实现简单的赛车漂移
提到赛车游戏,大家最关心的应该就是漂移吧?! 从学unity开始,我就一直在断断续续的研究赛车 因为自己技术太烂.悟性太差等原因,我走了不少弯路 也许你会说,网上那么多资料,你不会查啊 是啊!网上一搜 ...
- 学习SQLite之路(二)
下面就是真正关于数据库的一些知识了: 20160614更新 参考: http://www.runoob.com/sqlite/sqlite-tutorial.html 1. SQLite创建表: 基本 ...
- 深入理解计算机系统(4.1)---X86的孪生兄弟,Y86指令体系结构
引言 各位猿友们好,计算机系统系列很久没更新了,实在是抱歉之极.新的一年,为了给计算机系统系列添加一些新的元素,LZ将其更改为书的原名<深入理解计算机系统>.这本书非常厚,而且难度较高,L ...
- fir2(n,f,m)
编辑 函数fir2用来设计多通带任意响应FIR滤波器,该滤波器的幅频特性由向量对f和m确定,f为归一化频率向量,m为对应频率点上的幅度.当设计的滤波器在频率为π的幅度响应不是0时,滤波器的阶数n为偶数
- [Offer收割]编程练习赛5-1 小Ho的防护盾
#1357 : 小Ho的防护盾 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho的虚拟城市正在遭受小Hi的攻击,小Hi用来攻击小Ho城市的武器是一艘歼星舰,这艘歼星 ...
- Python 练习册
01:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果 [图像处理] 类似于图中效果: py 2.7代码: from PIL import Image, Im ...
- C#高级特性_Attribute
Attribute: 公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法和属性等.Attributes和Microsoft .NET ...
- Beta版本冲刺———第六天
会议照片: 项目燃尽图: 1.项目进展: 该项目的Beta版本冲刺到今天就大体结束,但是小组依然困在"如何保存每次游戏的分数,并将其排序列在排行榜中"的问题上,小组四个人都在一起解 ...
- js原型继承的几种方式
1. 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承+构造函数继承) 4,原型式继承 5. 寄生组合式继承 一.原型链继承 function Show(){ this.name ...
- Linux系统日志
日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关的日志信息 /va ...