百度富文本編輯器整合fastdfs文件服務器上傳
技術：springboot+maven+ueditor
概述
百度富文本整合fastdfs文件服務器上傳
詳細
1、前言
(1）適合人羣javascript
1,java服務端開發人員html
2,初級人員開發人員前端
3,瞭解spring springboot+mavenjava
3，瞭解小程序開發跟前端人員接口對接web
(2) 你須要準備什麼？spring
1,積極主動學習json
2,微信開發基本流程小程序
3,java後端幾大框架掌握如(spring springboot maven mybatis）後端
2、前期準備工做
軟件環境:ideaspringboot
官方下載:https://www.eclipse.org/downloads/
1丶基本需求
1，實現商品支付功能
2,項目目錄結構
3、實現步驟
-
首先去官網下載源文件 將如下文件導入本身的項目
-
按照教程你須要訪問index.html
這裏的index.html其實這個index.html的做用也是獲取同目錄下的json文件來讀取配置
因此致使你獲取不到config.json
因爲要用到文件上傳 須要導入jar包 放在WEB_INF的lib目錄下就行 而後右鍵項目buildpath一下
我這裏用maven
百度ueditor maven可能會找不到 能夠本身把jar放到本地倉庫 我是直接放到公司maven私服上 代替config.json文件跟config.json同樣 可是換成了java
package com.ueditor.util;
public class PublicMsg {
public final static String UEDITOR_CONFIG = "{\n" +
" \"imageActionName\": \"uploadimage\",\n" +
" \"imageFieldName\": \"upfile\",\n" +
" \"imageMaxSize\": 2048000,\n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
" \"imageCompressEnable\": true,\n" +
" \"imageCompressBorder\": 1600,\n" +
" \"imageInsertAlign\": \"none\",\n" +
" \"imageUrlPrefix\": \"\",\n" +
" \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
"\n" +
" \"scrawlActionName\": \"uploadscrawl\",\n" +
" \"scrawlFieldName\": \"upfile\",\n" +
" \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"scrawlMaxSize\": 2048000,\n" +
" \"scrawlUrlPrefix\": \"\",\n" +
" \"scrawlInsertAlign\": \"none\",\n" +
"\n" +
" \"snapscreenActionName\": \"uploadimage\",\n" +
" \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"snapscreenUrlPrefix\": \"\",\n" +
" \"snapscreenInsertAlign\": \"none\",\n" +
"\n" +
" \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
" \"catcherActionName\": \"catchimage\",\n" +
" \"catcherFieldName\": \"source\",\n" +
" \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"catcherUrlPrefix\": \"\",\n" +
" \"catcherMaxSize\": 2048000,\n" +
" \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"videoActionName\": \"uploadvideo\",\n" +
" \"videoFieldName\": \"upfile\",\n" +
" \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"videoUrlPrefix\": \"\",\n" +
" \"videoMaxSize\": 102400000,\n" +
" \"videoAllowFiles\": [\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
"\n" +
" \"fileActionName\": \"uploadfile\",\n" +
" \"fileFieldName\": \"upfile\",\n" +
" \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"fileUrlPrefix\": \"\",\n" +
" \"fileMaxSize\": 51200000,\n" +
" \"fileAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ],\n" +
"\n" +
" \"imageManagerActionName\": \"listimage\",\n" +
" \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
" \"imageManagerListSize\": 20,\n" +
" \"imageManagerUrlPrefix\": \"\",\n" +
" \"imageManagerInsertAlign\": \"none\",\n" +
" \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
"\n" +
" \"fileManagerActionName\": \"listfile\",\n" +
" \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
" \"fileManagerUrlPrefix\": \"\",\n" +
" \"fileManagerListSize\": 20,\n" +
" \"fileManagerAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ] \n" +
"\n" +
"}";
/**
* Ueditor的返回狀態類型
*/
public enum UeditorMsg{
SUCCESS("SUCCESS"),ERROR("上傳失敗");
private String v;
UeditorMsg(String v){
this.v =v;
}
public String get(){
return this.v;
}
}
}
3.修改ueditor.config.js裏的配置
Contorller接收改路徑 剛開始會請求你要是攔截路徑會看到xxx/controller.jsp?action=config
等於初始化的時候會先請求action=config
這時候咱們直接把java的代替config.json配置返回回去
注意一下這裏自定義了文件路徑，本文用Vo須要返回JSON 這是支持二次開發的文檔上寫的返回json格式
//{state：」數據狀態信息」，url：」圖片回顯路徑」，title：」文件title」，original：」文件名稱」，···}
package com.ueditor.conterller;
import com.google.common.collect.Maps;
import com.ueditor.util.FastDFSClientWrapper;
import com.ueditor.util.PublicMsg;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.Map;
@Controller
@RequestMapping("UeditorController")
public class UeditorController {
@Autowired
private FastDFSClientWrapper fastDFSClientWrapper;
@RequestMapping("/index")
private String showPage(){
return "index";
}
@RequestMapping(value="/ueditor")
@ResponseBody
public String ueditor(HttpServletRequest request) {
return PublicMsg.UEDITOR_CONFIG;
}
@RequestMapping(value="/imgUpload")
@ResponseBody
public Map imgUpload(MultipartFile upfile) throws IOException {
byte[] bytes = upfile.getBytes();
String originalFileName = upfile.getOriginalFilename();
String extension = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);
String fileName = upfile.getName();
long fileSize = upfile.getSize();
System.out.println(originalFileName + "==========" + fileName + "===========" + fileSize + "===============" + extension + "====" + bytes.length);
String url= "http://4.105.159.213/"+fastDFSClientWrapper.uploadFile(bytes, fileSize, extension);
String fileId ="ces";
return resultMap("SUCCESS",url,fileSize,fileId,fileName,extension);
}
private Map<String,Object> resultMap(String state,String url,long size,String title,String original,String type){
Map<String ,Object> result = Maps.newHashMap();
result.put("state",state);
result.put("original",original);
result.put("size",size);
result.put("title",title);
result.put("type",type);
result.put("url", url);
return result;
}
}
頁面引入js
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.all.js"> </script>
<!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
<!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/lang/zh-cn/zh-cn.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 'http://localhost:8081/UeditorController/imgUpload';
//'http://localhost:8080/imgUpload';爲方法imgUpload的訪問地址
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
4、運行效果
5、補充
整個功能已經出來了下面能夠安裝FastDFS因爲內容太不寫出來了我這裏提供一個安裝FastDFS地址按照這地址能夠搭建文件服務器的
FastDFS上傳
https://www.cnblogs.com/yufeng218/p/8111961.html
注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權
相關文章
- 1. 百度富文本編輯器整合fastdfs文件服務器上傳
- 2. 類百度富文本編輯器文件上傳。
- 3. springboot thymeleaf 整合 百度富文本編輯器UEditor進行圖片上傳
- 4. 使用百度富文本編輯器
- 5. 百度富文本編輯器
- 6. 百度富文本編輯器UEDITOR
- 7. 百度UEditor富文本編輯器
- 8. Jfinal整合百度富文本編輯器ueditor
- 9. uedit 富文本編輯器 圖片上傳 圖片服務器
- 10. springMVC -- 整合UEditor(富文本編輯器)
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • XML 編輯器 - XML 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
