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

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

木来 木来

首先呢,我们有这样一个需求:

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

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

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

  <!--写文章的模块,即富文本编辑器-->
 <div>
<textarea id="editor1" name="article_content"  autofocus >
</textarea>
<script>
$(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: '<%=basePath%>asset/public/js/simditor/images/image.png',
      upload : {
            url : '<%=basePath%>article/qiniuUploadImg.action?Math.random()', //文件上传的接口地址
            params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: 'ImageFile', //服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: '正在上传文件'
        } 
    });
  });
</script>

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

qiniuUploadImg.action

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

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

因为,我在这里配置的文件数据的参数名叫ImageFile,所以,我们需要修改Simditor文件夹下的lib下的simditor.js中的这一行代码:

 createInput = (function(_this) {
      return function() {
        if ($input) {
          $input.remove();
        }
        return $input = $('<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;
 
/**
 * 
* <p>Title:ArticleController </p>
* <p>Description:关于文章的Controller </p>
* <p>Company:www.inx.fun</p>
* @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!

1 条评论
木来
木来 (作者)
Controller中图片样式处理,根据自己的实际情况加