ueditor上傳檔案七牛雲
阿新 • • 發佈：2018-11-19
準備工作
ueditor外掛:百度雲下載資源: https://pan.baidu.com/s/1EL_hoJGTyZEf49WX0KQfvA
Ueditor下載官網https://ueditor.baidu.com/website/download.html
第一 匯入Maven專案中
第二 建立訪問編輯器的controller
package cn.itsource.controller; import java.util.HashMap; import java.util.Map; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.qiniu.util.Auth; @Controller public class IndexController { //訪問文字編輯頁面 @RequestMapping("/ueditor") public String ueditorPage() { return "ueditor"; } }
第三 ueditor前臺
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 載入編輯器的容器 --> <script style="height: 500px; width: 600px" id="container" name="content" type="text/plain"> 這裡寫你的初始化內容 </script> <!-- 配置檔案 --> <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script> <!-- 編輯器原始碼檔案 --> <script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script> <!-- 例項化編輯器 --> <script type="text/javascript"> UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') { return '/upload/uploadimages'; } else if (action == 'uploadvideo') { return ''; } else { return this._bkGetActionUrl.call(this, action); } } var ue = UE.getEditor('container'); <!--自定義編輯框功能圖示--> /* var ue = UE.getEditor('container', { toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold'] ], autoHeightEnabled: true, autoFloatEnabled: true }); */ </script> </body> </html>
第四 配置application.yml/等於application.xml,注意結構層次
#設定埠 server: port:8080 #設定上傳檔案大小 spring: http: multipart: maxFileSize: 100Mb maxRequestSize: 1000Mb #設定檢視解析器 mvc: view: prefix: /WEB-INF/jsp/ suffix: .jsp #日誌列印 logging: level: cn: itsource: DEBUG #七牛雲配置 上傳憑證AccessKey，SecretKey和Bucket qiniu: accessKey: P63Fl_oUacfVwpMGuiR826rc7byWqwqyy_OBIVm3 secretKey: yL_Uk2M3b68aM96ZC2dW-F8eir0R2Vuq5vE9wItz domain: http://pi5zfw3xm.bkt.clouddn.com/ bucket: testdemo
第五 後臺處理
// 獲取上傳憑證
@RequestMapping("/uploadimages")
@ResponseBody
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(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
try{
Response response = uploadManager.put(upfile.getBytes(), newFileName, upToken);
// 解析上傳成功的結果
/* DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),
DefaultPutRet.class);
System.out.println(putRet.key);
System.out.println(putRet.hash);*/
map.put("state","SUCCESS");
map.put("url",domain+newFileName);
map.put("title",newFileName);
map.put("original",newFileName);
}catch(Exception ex){
System.out.println("上傳失敗"+ex.getMessage());
map.put("state","ERROR");
map.put("url","");
map.put("title","");
map.put("original","");
}
return map;
}第六 注意:其實百度的ueditor官網是提供了上傳檔案到七牛雲的官方文件的,文件最後面有介紹,網上修改ueditor原始碼不建議採用;
如何自定義請求地址
本文件說明修改請求地址的方法。
應用場景
ueditor 1.4.2+ 推薦使用唯一的請求地址，通過GET引數action指定不同請求型別。 但很多使用者都希望使用自己寫好的上傳地址，下面提供一種解決方法： 由於所有ueditor請求都通過editor物件的getActionUrl方法獲取請求地址，可以直接通過複寫這個方法實現，例子如下：s._bkGetActionUrl.call(this, action);
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://a.b.com/upload.php';
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}}action型別以及說明
- uploadimage：//執行上傳圖片或截圖的action名稱
- uploadscrawl：//執行上傳塗鴉的action名稱
- uploadvideo：//執行上傳視訊的action名稱
- uploadfile：//controller裡,執行上傳視訊的action名稱
- catchimage：//執行抓取遠端圖片的action名稱
- listimage：//執行列出圖片的action名稱
- listfile：//執行列出檔案的action名稱
