SpringBoot整合UEditor富文本實現自定義上傳圖片、視頻到七牛雲存儲
下載 UEditor
一、下載的是jsp版本
二、將下載的文件放在springboot靜態資源的resources/static/js/文件夾下
在pom.xml加入如下的配置導入所需的jar包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>${commons-codec.version}</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>com.dcssn</groupId>
<artifactId>ueditor-qiniu-spring-boot-starter</artifactId>
<version>0.0.3</version>
</dependency>
複製代碼
在application.yml配置文件中加入如下配置：
ue:
config-file: static/js/ueditor/jsp/config.json #resources目錄下配置文件的位置
server-url: /static/js/ueditor/ueditor.do #服務器統一請求接口路徑
url-prefix: /file/ #"/"結尾
#七牛雲存儲，去註冊申請填入本身的信息
qiniu:
accessKey: U2cE0UOM3YbUW************PnNxPj6YmOsHrCN
secretKey: -HuyEESUeJEKE************5TWQt6xPUR3Upkc
domain: qnsa.****.com
#cdn: #下面bucket綁定的cdn 域名
bucket: salesassistprod
zone: z2
複製代碼
修改ueditor/ueditor.config.js 下默認接收請求上傳圖片的路徑，跟application.yml配置的ue.server-url=/static/js/ueditor/ueditor.do 一致。
在jsp頁面引入ueditor
一、引入配置文件
<script type="text/javascript" src="/static/js/bootstrap3/js/jquery-3.3.1.min.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="/static/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/js/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/static/js/ueditor/lang/zh-cn/zh-cn.js"></script>
複製代碼
二、在html>body須要引入位置定義
<div id="ueditor">
<script id="container" type="text/plain">
</script>
</div>
複製代碼
三、編寫js代碼
<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
var ue = UE.getEditor('container',{
toolbars:
[
[
'undo',
'redo',
'formatmatch', //格式刷
'source', //源代碼
'cleardoc', //清空文檔
'bold', //加粗
'indent', //首行縮進
'italic', //斜體
'underline', //下劃線
'strikethrough', //刪除線
'subscript', //下標
'superscript', //上標
'pasteplain', //純文本粘貼模式
'selectall', //全選
'preview', //預覽
//'horizontal', //分隔線
'removeformat', //清除格式
'time', //時間
'date', //日期
'fontfamily', //字體
'fontsize', //字號
'paragraph', //段落格式
],
[
'emotion', //表情
//'spechars', //特殊字符
//'help', //幫助
'justifyleft', //居左對齊
'justifyright', //居右對齊
'justifycenter', //居中對齊
'justifyjustify', //兩端對齊
'forecolor', //字體顏色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //無序列表
'lineheight', //行間距
'customstyle', //自定義標題
'touppercase', //字母大寫
'tolowercase', //字母小寫
'imagenone', //默認
'imageleft', //左浮動
'imageright', //右浮動
'imagecenter', //居中
'wordimage', //圖片轉存
//'snapscreen', //截圖
//'scrawl', //塗鴉
'simpleupload', //單圖上傳
//'insertimage', //多圖上傳
'insertvideo', //視頻
'fullscreen', //全屏
'link', //超連接
//'mobile'
]
],
enableAutoSave:false,
elementPathEnabled : false,
wordCount:true,//是否開啓字數統計
maximumWords:100000,//字數限制
wordCountMsg: '已輸入{#count}個字符, 還可輸入{#leave}個字符。',
initialFrameHeight:320,
iframeCssUrl: '/static/js/ueditor/themes/iframe.css',// 引入css
});
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' ) {
return '/upload/uploadimages.do';//自定義springboot後臺上傳的接口
}
else if (action == 'uploadvideo'){
return '/upload/uploadvideo.do';//自定義springboot後臺上傳的接口
}
else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
複製代碼
編寫springboot代碼後臺接口的主要代碼
一、在bean編寫一個加載application.yml下qiniu的配置信息類，get、set方法本身添加
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
@Component
@ConfigurationProperties(prefix = "qiniu")
public class QiNiu {
private String accessKey;
private String secretKey;
private String domain;
private String bucket;
private String zone;
}
複製代碼
二、在controller的類編寫上傳圖片、視頻的接口。導入的包自行添加
@RestController
@RequestMapping("/upload")
public class UEditorController {
@Autowired
private QiNiu qiNiu;
Logger logger = LoggerFactory.getLogger(getClass());
// 獲取上傳憑證
@RequestMapping("/uploadimages.do")
public Object uploadImage(MultipartFile upfile) {
// ...生成上傳憑證，而後準備上傳
Map<String,Object> map=new HashMap<>();
//上傳七牛雲
// 構造一個帶指定Zone對象的配置類
Configuration cfg = new Configuration(Zone.zone2());
// ...其餘參數參考類註釋
UploadManager uploadManager = new UploadManager(cfg);
String fileName=upfile.getOriginalFilename();//xxx.jpg
String uuid=UUID.randomUUID().toString();//abcd
String newFileName=uuid+fileName.substring(fileName.lastIndexOf("."));//新的文件名
Auth auth = Auth.create(qiNiu.getAccessKey(), qiNiu.getSecretKey());
String upToken = auth.uploadToken(qiNiu.getBucket());
try{
Response response = uploadManager.put(upfile.getBytes(), newFileName, upToken);//
// 解析上傳成功的結果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),
DefaultPutRet.class);
logger.info("成功上傳圖片到七牛雲");
logger.info("上傳七牛雲生成的key：" + putRet.key);
logger.info("上傳七牛雲生成的hash：" + putRet.hash);
logger.info("上傳七牛雲完整路徑爲：" + "http://"+qiNiu.getDomain()+"/"+newFileName);
map.put("state","SUCCESS");
map.put("url","http://"+qiNiu.getDomain()+"/"+newFileName);
map.put("original",newFileName);
map.put("title",newFileName);
}catch(Exception ex){
logger.error("上傳失敗"+ex.getMessage());
map.put("state","ERROR");
map.put("url","");
map.put("original","");
map.put("title","");
}
return map;
}
@RequestMapping(value = "/uploadvideo.do", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String,Object> saveVideo(MultipartHttpServletRequest req){
Map<String,Object> rs =new HashMap<String, Object>();
MultipartFile file =null;
String fileName ="";
String filePath ="";
long startTime = System.currentTimeMillis();// 獲取當前時間
Auth auth = Auth.create(qiNiu.getAccessKey(), qiNiu.getSecretKey());
String upToken = auth.uploadToken(qiNiu.getBucket());
logger.info("獲取token爲：" + upToken);
try{
file = req.getFile("upfile");
fileName = file.getOriginalFilename();
// 構造一個帶指定Zone對象的配置類
Configuration cfg = new Configuration(Zone.zone2());
// ...其餘參數參考類註釋
UploadManager uploadManager = new UploadManager(cfg);
String uuid=UUID.randomUUID().toString();
String newFileName=uuid+fileName.substring(fileName.lastIndexOf("."));//新的文件名
Response response = uploadManager.put(file.getBytes(), newFileName , upToken);
// 解析上傳成功的結果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),
DefaultPutRet.class);
logger.info("視頻文件上傳成功!");
long endTime = System.currentTimeMillis();//獲取結束時間
logger.info("視頻文件上傳用時：" + (endTime - startTime) + "ms");
logger.info("上傳七牛雲生成的key：" + putRet.key);
logger.info("上傳七牛雲生成的hash：" + putRet.hash);
filePath = "http://" + qiNiu.getDomain() + "/" + putRet.key;//構造上傳後的視頻路徑
rs.put("state","SUCCESS");// UEDITOR的規則:不爲SUCCESS則顯示state的內容
rs.put("url",filePath);//返回上傳到七牛雲的成功路徑
rs.put("title", newFileName);
rs.put("original", newFileName);
}catch(Exception e) {
logger.error("文件上傳失敗",e);
rs.put("state","文件上傳失敗!");
rs.put("url","");
rs.put("title","");
rs.put("original","");
}
return rs;
}
}
複製代碼
其餘博客：
docker安裝18.03.0+rancher1.6.17 的容器虛擬化部署
vue.js+iview 實現全局加載的公用方法
歡迎留言評論學習javascript
相關文章
- 1. 用ueditor上傳圖片、文件等到七牛雲存儲
- 2. 富文本vue-quill-editor整合七牛雲上傳圖片
- 3. ueditor上傳圖片到七牛雲存儲（form api,java）
- 4. 【UEditor】遠程上傳圖片到【七牛雲存儲】
- 5. Spring+Vue整合UEditor富文本實現圖片附件上傳
- 6. Ueditor上傳圖片到本地改造到上傳圖片到七牛雲存儲
- 7. 富文本summernote 上傳圖片七牛
- 8. tp5.0整合七牛雲圖片上傳
- 9. Ueditor上傳圖片到本地改造到上傳圖片到雲存儲
- 10. UEditor 上傳圖片到七牛
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • Hibernate整合EHCache實現二級緩存 - Hibernate教程
- • RxJava操作符（十）自定義操作符
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
