最近公司项目需要用到百度编辑器充当页面编辑器,但是又不想将图片直接上传到服务器上(图片的占据巨大内存,这样会给服务器带来巨大压力),于是就有了将图片上传到七牛云得需求,但是百度家工程师没有提供上传七牛云的接口,没办法只能自己写了,网上找了很多资料但是结果都不如人意,这个问题确实也困扰笔者一段时间,但是经过多次试验终于成功了,废话就到这里了,下面开始进行百度富文本编辑器直传七牛云之旅吧~
1.首先咱们去七牛云官网看一下前期需要进行的相关配置:
七牛云官方网址:https://www.qiniu.com/
七牛云官方文档: https://developer.qiniu.com/kodo/manual/1233/console-quickstart
注册后进行配置后,我们可以从七牛云官方网站上得到我们需要的bucket、accessKey、secretKey以及我们可以直接访问的外链网址。下载七牛云的提供的sdk,下载地址: https://developer.qiniu.com/kodo/sdk/1239/java
2.Ueditor的相关特点:
百度富文本编辑器的具体配置笔者在这里就不一一概述了,官方提供的文档上面有非常详细的配置。但是值得一提的就是百度富文本编辑器上传图片是直接到服务器的,在我们上传到七牛云后需要通过io流将服务器上的文件进行清除工作。
3.思路以及分析:
那百度富文本编辑器可以传给后台纯粹的html代码,这样我们就可以通过jsoup进行解析,直接拿到上传图片的src的值,即文件在服务器上的具体路径,这样我们再将这个路径上传到服务器上面就实现了上传七牛云的操作,但是这里要注意,需要将七牛云返回的地址替换到Ueditor内容中,然后在进行删除操作。
4.代码:
1.笔者用的七牛云上传类(同事集成的,笔者感觉挺好用,喜欢的就拿走吧)
import java.util.Map;
import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
public class UploadFile {
public static String key(String img) {
//...生成上传凭证,然后准备上传
String imgUrl = "";
String bucket = "在这里输入你的bucket";
String accessKey = "在这里输入你的accessKey";
String secretKey = "在这里输入你的secretKey";
//构造一个带指定Zone对象的配置类
/**
* 华东 Zone.zone0()
华北 Zone.zone1()
华南 Zone.zone2()
北美 Zone.zoneNa0()
*/
Configuration cfg = new Configuration(Zone.zone0());
//...其他参数参考类注释
UploadManager uploadManager = new UploadManager(cfg);
// String zxc = "E:\\手机备份\\华为V8\\DCIM\\Camera\\1_2_1.png";
//如果是Windows情况下,格式是 D:\\qiniu\\test.png
String localFilePath = img;
//默认不指定key的情况下,以文件内容的hash值作为文件名
String key = img.substring(img.lastIndexOf("/")+1,img.length());
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
try {
Response response = uploadManager.put(localFilePath, key, upToken);
System.out.println(response.bodyString());
//解析上传成功的结果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
imgUrl = putRet.key;
// System.out.println(putRet.key);
// System.out.println(putRet.hash);
} catch (QiniuException ex) {
Response r = ex.response;
//System.err.println(r.toString());
try {
System.err.println(r.bodyString());
} catch (QiniuException ex2) {
//ignore
}
}
return "在这里输入你的外链地址"+imgUrl;
}
}
2.Ueditor编辑器传值到后台的处理工作(jsoup用作页面解析真的太好用了):
//在这里进行替换七牛云的数据,这里笔者是用map接收接收jsp页面数据的,good_des是jsp页面的Ueditor的name
Document doc = Jsoup.parse((String) map.get("goods_des"));//拿到编辑器里面的所有内容
Elements elements = doc.select("img[src]");//获取到的值为所有的<img src="...">
String fileRoute ="";
for (Element element : elements) {
String src = element.attr("src");//获取到src的值,开始进行上传七牛云的操作
System.out.println("图片的路径:"+request.getServletContext().getRealPath("/")+src);
//找到百度编辑器文件储存的路径
System.out.println(fileRoute);
String imgUrl = UploadFile.key(request.getServletContext().getRealPath("/")+src);
//接下来进行字符串的替换工作
element.attr("src",imgUrl);
fileRoute =request.getServletContext().getRealPath("/")+ src.substring(0, src.lastIndexOf("/"));
//System.out.println("替换后的src地址:"+element.attr("src"));
}
//System.out.println("替换后的编辑器的内容"+doc.body());
//System.out.println("替换后的编辑器的内容"+map.get("goods_des"));
//通过io流进行文件的删除操作
//+System.out.println("??????"+doc.body().toString().substring(6, doc.body().toString().length()-7));
map.put("goods_des",doc.body().toString().substring(7, doc.body().toString().length()-7));
File file11 = new File(fileRoute);
if (file11.isDirectory()){//判断file是否是文件目录 若是返回TRUE
String name[]=file11.list();//name存储file文件夹中的文件名
for (int i=0; i<name.length; i++){
File f=new File(fileRoute, name[i]);//此时就可得到文件夹中的文件
f.delete();//删除文件
}
}//删除完毕
以上就是笔者想到最简单的实现方式,困难重重,思想先行,如果有好的方法欢迎留言探讨,哦了~