Ueditor编辑器内图片实现上传七牛云(JAVA版)

阅读: 评论:0

Ueditor编辑器内图片实现上传七牛云(JAVA版)

Ueditor编辑器内图片实现上传七牛云(JAVA版)

    最近公司项目需要用到百度编辑器充当页面编辑器,但是又不想将图片直接上传到服务器上(图片的占据巨大内存,这样会给服务器带来巨大压力),于是就有了将图片上传到七牛云得需求,但是百度家工程师没有提供上传七牛云的接口,没办法只能自己写了,网上找了很多资料但是结果都不如人意,这个问题确实也困扰笔者一段时间,但是经过多次试验终于成功了,废话就到这里了,下面开始进行百度富文本编辑器直传七牛云之旅吧~

      1.首先咱们去七牛云官网看一下前期需要进行的相关配置:

        七牛云官方网址:/

        七牛云官方文档:   

         注册后进行配置后,我们可以从七牛云官方网站上得到我们需要的bucket、accessKey、secretKey以及我们可以直接访问的外链网址。下载七牛云的提供的sdk,下载地址: 

       2.Ueditor的相关特点:

          百度富文本编辑器的具体配置笔者在这里就不一一概述了,官方提供的文档上面有非常详细的配置。但是值得一提的就是百度富文本编辑器上传图片是直接到服务器的,在我们上传到七牛云后需要通过io流将服务器上的文件进行清除工作。

           

       3.思路以及分析:

           那百度富文本编辑器可以传给后台纯粹的html代码,这样我们就可以通过jsoup进行解析,直接拿到上传图片的src的值,即文件在服务器上的具体路径,这样我们再将这个路径上传到服务器上面就实现了上传七牛云的操作,但是这里要注意,需要将七牛云返回的地址替换到Ueditor内容中,然后在进行删除操作。

       4.代码:

            1.笔者用的七牛云上传类(同事集成的,笔者感觉挺好用,喜欢的就拿走吧)

import java.util.Map;le.gson.Gson;
import com.qiniumon.QiniuException;
import com.qiniumon.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.del.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对象的配置类/***   华东	0()华北	1()华南	2()北美	Na0()*/Configuration cfg = new 0());//...其他参数参考类注释UploadManager uploadManager = new UploadManager(cfg);
//        String zxc = "E:\手机备份\华为V8\DCIM\Camera\1_2_1.png";//如果是Windows情况下,格式是 D:\qiniu\test.pngString localFilePath = img;//默认不指定key的情况下,以文件内容的hash值作为文件名String key =  img.substring(img.lastIndexOf("/")+1,img.length());Auth auth = ate(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;//String());try {println(r.bodyString());} catch (QiniuException ex2) {//ignore}}return "在这里输入你的外链地址"+imgUrl;}}

2.Ueditor编辑器传值到后台的处理工作(jsoup用作页面解析真的太好用了):

//在这里进行替换七牛云的数据,这里笔者是用map接收接收jsp页面数据的,good_des是jsp页面的Ueditor的name
			Document doc = Jsoup.parse((String) ("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("图片的路径:"&#ServletContext().getRealPath("/")+src);//找到百度编辑器文件储存的路径System.out.println(fileRoute);String imgUrl = UploadFile.ServletContext().getRealPath("/")+src);//接下来进行字符串的替换工作element.attr("src",imgUrl);fileRoute &#ServletContext().getRealPath("/")+ src.substring(0, src.lastIndexOf("/"));//System.out.println("替换后的src地址:"+element.attr("src"));}//System.out.println("替换后的编辑器的内容"+doc.body());//System.out.println("替换后的编辑器的内容"&#("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();//删除文件  }  }//删除完毕  

以上就是笔者想到最简单的实现方式,困难重重,思想先行,如果有好的方法欢迎留言探讨,哦了~

 

 

 

本文发布于:2024-01-29 04:37:21,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170647424312747.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:编辑器   上传   图片   Ueditor   七牛云
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23