首先呢，我們有這樣一個(gè)需求：

當(dāng)圖片上傳Simditor時(shí)，將其保存到七牛云上，然后并回顯在我們的Simditor中。

首先，需要我們有一個(gè)七牛云帳號(hào)，并且配置Simditor富文本編輯器。

其次，我們需要在寫(xiě)文章的jsp頁(yè)面配置以下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, //鍵值對(duì),指定文件上傳接口的額外參數(shù),上傳的時(shí)候隨文件一起提交

fileKey: 'ImageFile', //服務(wù)器端獲取文件數(shù)據(jù)的參數(shù)名

connectionCount: 3,

leaveConfirm: '正在上傳文件'

}

});

});

以上主要是配置了一個(gè)圖片上傳到哪個(gè)接口，若我們點(diǎn)擊了文件上傳，則上傳到我的qiniuUploadImg.action

這個(gè)接口上去。后面的math.random()是生成一個(gè)隨機(jī)數(shù)，確保每次訪(fǎng)問(wèn)都不是同一個(gè)訪(fǎng)問(wèn)，不然的話(huà)，瀏覽器可能不會(huì)去執(zhí)行。

然后我們配置了文件數(shù)據(jù)的參數(shù)名叫ImageFile，這個(gè)地方要和后臺(tái)Controller接收到的圖片的文件名稱(chēng)一致。

因?yàn)?#xff0c;我在這里配置的文件數(shù)據(jù)的參數(shù)名叫ImageFile，所以，我們需要修改Simditor文件夾下的lib下的simditor.js中的這一行代碼：createInput = (function(_this) {

return function() {

if ($input) {

$input.remove();

}

return $input = $('', {

type: 'file',

name:'ImageFile',//在此處加input的name屬性by誠(chéng)意印象時(shí)玉龍

title: _this._t('uploadImage'),

multiple: true,

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

}).appendTo($uploadItem);

};

然后，我們看一下我的后臺(tái)七牛云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:關(guān)于文章的Controller

*

Company:www.inx.fun

* @author? 時(shí)玉龍

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

*/

@Controller

@RequestMapping("/article")

public class ArticleController {

//注入文章service層

@Autowired

private ArticleService articleservice;

@Autowired

private UserService userservice;

//封裝 七牛云里的? AK/SK 存儲(chǔ)空間名稱(chēng)

private static final String AccessKey="填寫(xiě)你自己的密鑰";

private static final String SecretKey="填寫(xiě)七牛云上自己的";

//外鏈地址

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

//一開(kāi)始，你填寫(xiě)自己的七牛云默認(rèn)域名，后面別忘了加個(gè)/

//我這是已經(jīng)CDN融合成功的。

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

//存儲(chǔ)空間名

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

//圖片上傳成功后的返回信息

private String msg;

//圖片水印樣式

private String style="-imgchuli";

/**

*

* @Title: qiniuUploadImg

* @Description:文章圖片七牛云上傳

* @author 時(shí)玉龍

* @param ImageFile

* @param request

* @param response

* @return

* @throws Exception

* @return String

* @throws

*/

@RequestMapping("/qiniuUploadImg")

//RequiresPermissions("article:add")在這里進(jìn)行權(quán)限的匹配驗(yàn)證，通過(guò)注解的方法

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

//生成uuid，使得圖片名不重復(fù)

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

//uuid基礎(chǔ)上加入時(shí)間戳

keyname+=System.currentTimeMillis();

//默認(rèn)不指定key的情況下，以文件內(nèi)容的hash值作為文件名

String key = System.currentTimeMillis()+keyname;

//根據(jù)存放的機(jī)房 選擇對(duì)象?? 這里自動(dòng)選擇

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

UploadManager uploadManager=new? UploadManager(cfg);

//用戶(hù)新建

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

//上傳的空間

String uploadToken=auth.uploadToken(bucket);

try {

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

//解析上傳成功的結(jié)果

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

//拼接七牛云鏈接

String qiniuUrl=spaceName+key+style;

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

//創(chuàng)建image對(duì)象

Image img =new Image();

//裝填圖片的七牛云url地址

img.setImage_text(qiniuUrl);

//添加文章圖片到數(shù)據(jù)庫(kù)

int result=articleservice.insertArticleOneImg(img);

if(result>0){//如果圖片地址成功加入數(shù)據(jù)庫(kù)

//將qiniuUrl返回文章頁(yè)面

//裝填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;

}

}

上傳七牛云參數(shù)中的MultipartFile ImageFile

一定要與之前的參數(shù)都對(duì)應(yīng)起來(lái)。

七牛云密鑰填寫(xiě)自己的密鑰。

密鑰位置在進(jìn)了管理控制臺(tái)之后，右上角個(gè)人面板-密鑰管理中。

填好之后，這樣就可以了，然后，我們需要對(duì)返回的msg信息做一個(gè)處理。//裝填msg信息

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

具體處理點(diǎn)在simditor.js中

在這里進(jìn)行處理的作用是讓其上傳成功后，將剛才上傳的圖片回顯在Simditor富文本編輯器中。_this.loadImage($img, img_path, function() {

var $mask;

$img.removeData('file');

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

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

//在這里，將其圖片的大小控制在100%以?xún)?nèi)，實(shí)現(xiàn)圖片的自適應(yīng)富文本編輯器寬度大小

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

//在此處修改圖片的src地址by時(shí)玉龍

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

加上最下面這兩句代碼，就實(shí)現(xiàn)了圖片的上傳之后的回顯。

我都實(shí)現(xiàn)https了，就是給其全部在controller與simditor.js中出現(xiàn)http的，加上https就是了，你能看到我這篇文章，說(shuō)明剛開(kāi)始搗鼓，就先用默認(rèn)域名測(cè)試就行，弄好了再弄CDN融合。

歡迎入坑Simditor！

總結(jié)

以上是生活随笔為你收集整理的java 图片回显_java实现Simditor图片上传七牛云并回显的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。