java 图片回显_java实现Simditor图片上传七牛云并回显

首先呢，我们有这样一个需求：

当图片上传Simditor时，将其保存到七牛云上，然后并回显在我们的Simditor中。

首先，需要我们有一个七牛云帐号，并且配置Simditor富文本编辑器。

其次，我们需要在写文章的jsp页面配置以下js

$(function() {

var editor,toolbar;

Simditor.locale = 'zh-CN';

toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];

editor = new Simditor({

textarea: $('#editor1'),

toolbar: toolbar,

pasteImage: true,//是否允许粘帖上传图片

defaultImage: 'asset/public/js/simditor/images/image.png',

upload : {

url : 'article/qiniuUploadImg.action?Math.random()', //文件上传的接口地址

params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交

fileKey: 'ImageFile', //服务器端获取文件数据的参数名

connectionCount: 3,

leaveConfirm: '正在上传文件'

}

});

});

以上主要是配置了一个图片上传到哪个接口，若我们点击了文件上传，则上传到我的qiniuUploadImg.action

这个接口上去。后面的math.random()是生成一个随机数，确保每次访问都不是同一个访问，不然的话，浏览器可能不会去执行。

然后我们配置了文件数据的参数名叫ImageFile，这个地方要和后台Controller接收到的图片的文件名称一致。

因为，我在这里配置的文件数据的参数名叫ImageFile，所以，我们需要修改Simditor文件夹下的lib下的simditor.js中的这一行代码：createInput = (function(_this) {

return function() {

if ($input) {

$input.remove();

}

return $input = $('', {

type: 'file',

name:'ImageFile',//在此处加input的name属性by诚意印象时玉龙

title: _this._t('uploadImage'),

multiple: true,

accept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg'

}).appendTo($uploadItem);

};

然后，我们看一下我的后台七牛云Controller的图片处理方法：package impressive.controller;

import java.io.IOException;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.List;

import java.util.UUID;

import java.util.concurrent.atomic.AtomicInteger;

import javax.servlet.http.Cookie;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import impressive.bean.Article;

import impressive.bean.ArticleCustom;

import impressive.bean.Comment;

import impressive.bean.CommentCustom;

import impressive.bean.Image;

import impressive.bean.Tags;

import impressive.bean.TagsLink;

import impressive.bean.User;

import impressive.service.ArticleService;

import impressive.service.UserService;

import impressive.utils.Time;

import net.sf.ehcache.Cache;

import net.sf.ehcache.CacheManager;

import net.sf.ehcache.Element;

import org.apache.shiro.SecurityUtils;

import org.apache.shiro.authc.ExcessiveAttemptsException;

import org.apache.shiro.subject.Subject;

import org.owasp.esapi.ESAPI;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.cache.annotation.Cacheable;

import org.springframework.cache.ehcache.EhCacheCacheManager;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import com.alibaba.fastjson.JSON;

import com.alibaba.fastjson.JSONObject;

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;

/**

*

*

Title:ArticleController

*

Description:关于文章的Controller

*

Company:www.inx.fun

* @author  时玉龙

* @date    2018年4月28日下午11:08:54

*/

@Controller

@RequestMapping("/article")

public class ArticleController {

//注入文章service层

@Autowired

private ArticleService articleservice;

@Autowired

private UserService userservice;

//封装 七牛云里的  AK/SK 存储空间名称

private static final String AccessKey="填写你自己的密钥";

private static final String SecretKey="填写七牛云上自己的";

//外链地址

private static final String prefixname="http://";

//一开始，你填写自己的七牛云默认域名，后面别忘了加个/

//我这是已经CDN融合成功的。

private static final String spaceName="image.inx.fun/";

//存储空间名

private static final String bucket="inx-fun";

//图片上传成功后的返回信息

private String msg;

//图片水印样式

private String style="-imgchuli";

/**

*

* @Title: qiniuUploadImg

* @Description:文章图片七牛云上传

* @author 时玉龙

* @param ImageFile

* @param request

* @param response

* @return

* @throws Exception

* @return String

* @throws

*/

@RequestMapping("/qiniuUploadImg")

//RequiresPermissions("article:add")在这里进行权限的匹配验证，通过注解的方法

public @ResponseBody String qiniuceshi(MultipartFile ImageFile,HttpServletRequest request,HttpServletResponse response) throws Exception{

//生成uuid，使得图片名不重复

String keyname=UUID.randomUUID()+"impressive";

//uuid基础上加入时间戳

keyname+=System.currentTimeMillis();

//默认不指定key的情况下，以文件内容的hash值作为文件名

String key = System.currentTimeMillis()+keyname;

//根据存放的机房 选择对象   这里自动选择

Configuration cfg = new Configuration(Zone.autoZone());

UploadManager uploadManager=new  UploadManager(cfg);

//用户新建

Auth auth=Auth.create(AccessKey, SecretKey);

//上传的空间

String uploadToken=auth.uploadToken(bucket);

try {

Response qiniuresponse=uploadManager.put(ImageFile.getInputStream(), key, uploadToken,null,null);

//解析上传成功的结果

DefaultPutRet putRet=new Gson().fromJson(qiniuresponse.bodyString(), DefaultPutRet.class);

//拼接七牛云链接

String qiniuUrl=spaceName+key+style;

//   System.out.println("图片的地址:"+qiniuUrl);

//创建image对象

Image img =new Image();

//装填图片的七牛云url地址

img.setImage_text(qiniuUrl);

//添加文章图片到数据库

int result=articleservice.insertArticleOneImg(img);

if(result>0){//如果图片地址成功加入数据库

//将qiniuUrl返回文章页面

//装填msg信息

msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + qiniuUrl + "\"}";

}else{

System.out.println("失败！");

}

//     System.out.println(putRet.key);

//    System.out.println(putRet.hash);

}catch (QiniuException e) {

Response r = e.response;

System.err.println(r.toString());

try {

System.err.println(r.bodyString());

} catch (QiniuException ex2) {

}

}catch (IOException e) {

e.printStackTrace();

}

return msg;

}

}

上传七牛云参数中的MultipartFile ImageFile

一定要与之前的参数都对应起来。

七牛云密钥填写自己的密钥。

密钥位置在进了管理控制台之后，右上角个人面板-密钥管理中。

填好之后，这样就可以了，然后，我们需要对返回的msg信息做一个处理。//装填msg信息

msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + qiniuUrl + "\"}";

具体处理点在simditor.js中

在这里进行处理的作用是让其上传成功后，将刚才上传的图片回显在Simditor富文本编辑器中。_this.loadImage($img, img_path, function() {

var $mask;

$img.removeData('file');

$img.removeClass('uploading').removeClass('loading');

$mask = $img.data('mask');

//在这里，将其图片的大小控制在100%以内，实现图片的自适应富文本编辑器宽度大小

$img.css("max-width","100%");

//在此处修改图片的src地址by时玉龙

$img.attr('src','http://'+img_path);

加上最下面这两句代码，就实现了图片的上传之后的回显。

我都实现https了，就是给其全部在controller与simditor.js中出现http的，加上https就是了，你能看到我这篇文章，说明刚开始捣鼓，就先用默认域名测试就行，弄好了再弄CDN融合。

欢迎入坑Simditor！