springboot + uedior富文本編輯器上傳文件至FTP服務器(前後端分離項目)

一、前言

ueditor是百度的一個富文本編輯器,可以實現上傳各種格式的文件至服務器,編輯公告、新聞等時可以使用此插件。
ueditor有兩種使用方法:
1、直接在官網下載ueditor的jar包,部署到tomcat中,此時可直接使用,只不過此時文件是上傳到部署ueditor服務器的默認文件夾下;
2、下載ueditor的源碼包,將代碼引入項目中,並對其代碼中的上傳邏輯進行重寫,可實現將文件上傳到指定的文件夾。
本博文使用的就是第2中方法,使用springboot項目整合ueditor,將文件上傳至指定的FTP文件服務器。

二、準備工作

1、下載ueditor完整源碼包:https://ueditor.baidu.com/website/download.html
解壓之後進入jsp文件夾,文件結構如下:
在這裏插入圖片描述
2、將上圖中的src文件夾下的代碼複製到spingboot項目的java代碼中:
在這裏插入圖片描述
3、將上圖中的config.json文件複製到spingboot項目的resources文件夾下;
4、在springboot項目中導入下面的jar包:
在這裏插入圖片描述

三、重寫ueditor的代碼

1、新建一個controller類,用於前端的富文本編輯器獲取config.json配置文件、上傳文件、讀取文件。

@RestController
@CrossOrigin
@RequestMapping("api/ueditor")
@Slf4j
public class UeditorController {

	/**
	*  富文本編輯器獲取config.json配置文件、上傳文件
	** /
	@RequestMapping(value="/exec", method={RequestMethod.GET, RequestMethod.POST})
	public void exec(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
		request.setCharacterEncoding("utf-8");
		if("config".equals(request.getParameter("action"))){
		//前端初次加載富文本編輯器時,需要來讀取config.json配置文件
			response.setContentType("application/javascript");
		}else {
		//上傳文件
			response.setContentType("text/html");
		}
		String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath();
		try {
			response.getWriter().write(new ActionEnter(request, rootPath).exec());
		} catch (IOException e) {
			log.error("ueditor訪問失敗", e);
		}
	}


	 /**
	 *  富文本編輯器讀取文件
	 ** /
	@RequestMapping(value="/show")
	public void show(@RequestParam("path") String path, HttpServletResponse response) throws IOException{
		InputStream inputStream = FtpUtil.downloadFile(path);
		String prexi = path.substring(path.lastIndexOf(".")+1);
		//根據文件後綴,設置不同的contentType
		String contentType = getContentType(prexi);
		response.setContentType(contentType);
		byte[] data = new byte[1024];
		int len = 0;
		ServletOutputStream out = response.getOutputStream();
		while((len = in.read(data)) != -1){
			out.write(data,0,len);
		}
	}

	 /**
	 *  獲取文件類型
	 ** /
	private static String getContentType(String fileextname){
		switch (fileextname)
		{
			case "jpeg": return "image/jpeg";
			case "jpg": return "image/jpeg";
			case "js": return "application/x-javascript";
			case "jsp": return "text/html";
			case "gif": return "image/gif";
			case "htm": return "text/html";
			case "html": return "text/html";
			case "asf": return "video/x-ms-asf";
			case "avi": return "video/avi";
			case "bmp": return "application/x-bmp";
			case "asp": return "text/asp";
			case "wma": return "audio/x-ms-wma";
			case "wav": return "audio/wav";
			case "wmv": return "video/x-ms-wmv";
			case "ra": return "audio/vnd.rn-realaudio";
			case "ram": return "audio/x-pn-realaudio";
			case "rm": return "application/vnd.rn-realmedia";
			case "rmvb": return "application/vnd.rn-realmedia-vbr";
			case "xhtml": return "text/html";
			case "png": return "image/png";
			case "ppt": return "application/x-ppt";
			case "tif": return "image/tiff";
			case "tiff": return "image/tiff";
			case "xls": return "application/x-xls";
			case "xlw": return "application/x-xlw";
			case "xml": return "text/xml";
			case "xpl": return "audio/scpls";
			case "swf": return "application/x-shockwave-flash";
			case "torrent": return "application/x-bittorrent";
			case "dll": return "application/x-msdownload";
			case "asa": return "text/asa";
			case "asx": return "video/x-ms-asf";
			case "au": return "audio/basic";
			case "css": return "text/css";
			case "doc": return "application/msword";
			case "exe": return "application/x-msdownload";
			case "mp1": return "audio/mp1";
			case "mp2": return "audio/mp2";
			case "mp2v": return "video/mpeg";
			case "mp3": return "audio/mp3";
			case "mp4": return "video/mpeg4";
			case "mpa": return "video/x-mpg";
			case "mpd": return "application/vnd.ms-project";
			case "mpe": return "video/x-mpeg";
			case "mpeg": return "video/mpg";
			case "mpg": return "video/mpg";
			case "mpga": return "audio/rn-mpeg";
			case "mpp": return "application/vnd.ms-project";
			case "mps": return "video/x-mpeg";
			case "mpt": return "application/vnd.ms-project";
			case "mpv": return "video/mpg";
			case "mpv2": return "video/mpeg";
			case "wml": return "text/vnd.wap.wml";
			case "wsdl": return "text/xml";
			case "xsd": return "text/xml";
			case "xsl": return "text/xml";
			case "xslt": return "text/xml";
			case "htc": return "text/x-component";
			case "mdb": return "application/msaccess";
			case "zip": return "application/zip";
			case "rar": return "application/x-rar-compressed";
			case "*": return "application/octet-stream";
			case "001": return "application/x-001";
			case "301": return "application/x-301";
			case "323": return "text/h323";
			case "906": return "application/x-906";
			case "907": return "drawing/907";
			case "a11": return "application/x-a11";
			case "acp": return "audio/x-mei-aac";
			case "ai": return "application/postscript";
			case "aif": return "audio/aiff";
			case "aifc": return "audio/aiff";
			case "aiff": return "audio/aiff";
			case "anv": return "application/x-anv";
			case "awf": return "application/vnd.adobe.workflow";
			case "biz": return "text/xml";
			case "bot": return "application/x-bot";
			case "c4t": return "application/x-c4t";
			case "c90": return "application/x-c90";
			case "cal": return "application/x-cals";
			case "cat": return "application/vnd.ms-pki.seccat";
			case "cdf": return "application/x-netcdf";
			case "cdr": return "application/x-cdr";
			case "cel": return "application/x-cel";
			case "cer": return "application/x-x509-ca-cert";
			case "cg4": return "application/x-g4";
			case "cgm": return "application/x-cgm";
			case "cit": return "application/x-cit";
			case "class": return "java/*";
			case "cml": return "text/xml";
			case "cmp": return "application/x-cmp";
			case "cmx": return "application/x-cmx";
			case "cot": return "application/x-cot";
			case "crl": return "application/pkix-crl";
			case "crt": return "application/x-x509-ca-cert";
			case "csi": return "application/x-csi";
			case "cut": return "application/x-cut";
			case "dbf": return "application/x-dbf";
			case "dbm": return "application/x-dbm";
			case "dbx": return "application/x-dbx";
			case "dcd": return "text/xml";
			case "dcx": return "application/x-dcx";
			case "der": return "application/x-x509-ca-cert";
			case "dgn": return "application/x-dgn";
			case "dib": return "application/x-dib";
			case "dot": return "application/msword";
			case "drw": return "application/x-drw";
			case "dtd": return "text/xml";
			case "dwf": return "application/x-dwf";
			case "dwg": return "application/x-dwg";
			case "dxb": return "application/x-dxb";
			case "dxf": return "application/x-dxf";
			case "edn": return "application/vnd.adobe.edn";
			case "emf": return "application/x-emf";
			case "eml": return "message/rfc822";
			case "ent": return "text/xml";
			case "epi": return "application/x-epi";
			case "eps": return "application/x-ps";
			case "etd": return "application/x-ebx";
			case "fax": return "image/fax";
			case "fdf": return "application/vnd.fdf";
			case "fif": return "application/fractals";
			case "fo": return "text/xml";
			case "frm": return "application/x-frm";
			case "g4": return "application/x-g4";
			case "gbr": return "application/x-gbr";
			case "gcd": return "application/x-gcd";
			case "gl2": return "application/x-gl2";
			case "gp4": return "application/x-gp4";
			case "hgl": return "application/x-hgl";
			case "hmr": return "application/x-hmr";
			case "hpg": return "application/x-hpgl";
			case "hpl": return "application/x-hpl";
			case "hqx": return "application/mac-binhex40";
			case "hrf": return "application/x-hrf";
			case "hta": return "application/hta";
			case "htt": return "text/webviewhtml";
			case "htx": return "text/html";
			case "icb": return "application/x-icb";
			case "ico": return "application/x-ico";
			case "iff": return "application/x-iff";
			case "ig4": return "application/x-g4";
			case "igs": return "application/x-igs";
			case "iii": return "application/x-iphone";
			case "img": return "application/x-img";
			case "ins": return "application/x-internet-signup";
			case "isp": return "application/x-internet-signup";
			case "IVF": return "video/x-ivf";
			case "java": return "java/*";
			case "jfif": return "image/jpeg";
			case "jpe": return "application/x-jpe";
			case "la1": return "audio/x-liquid-file";
			case "lar": return "application/x-laplayer-reg";
			case "latex": return "application/x-latex";
			case "lavs": return "audio/x-liquid-secure";
			case "lbm": return "application/x-lbm";
			case "lmsff": return "audio/x-la-lms";
			case "ls": return "application/x-javascript";
			case "ltr": return "application/x-ltr";
			case "m1v": return "video/x-mpeg";
			case "m2v": return "video/x-mpeg";
			case "m3u": return "audio/mpegurl";
			case "m4e": return "video/mpeg4";
			case "mac": return "application/x-mac";
			case "man": return "application/x-troff-man";
			case "math": return "text/xml";
			case "mfp": return "application/x-shockwave-flash";
			case "mht": return "message/rfc822";
			case "mhtml": return "message/rfc822";
			case "mi": return "application/x-mi";
			case "mid": return "audio/mid";
			case "midi": return "audio/mid";
			case "mil": return "application/x-mil";
			case "mml": return "text/xml";
			case "mnd": return "audio/x-musicnet-download";
			case "mns": return "audio/x-musicnet-stream";
			case "mocha": return "application/x-javascript";
			case "movie": return "video/x-sgi-movie";
			case "mpw": return "application/vnd.ms-project";
			case "mpx": return "application/vnd.ms-project";
			case "mtx": return "text/xml";
			case "mxp": return "application/x-mmxp";
			case "net": return "image/pnetvue";
			case "nrf": return "application/x-nrf";
			case "nws": return "message/rfc822";
			case "odc": return "text/x-ms-odc";
			case "out": return "application/x-out";
			case "p10": return "application/pkcs10";
			case "p12": return "application/x-pkcs12";
			case "p7b": return "application/x-pkcs7-certificates";
			case "p7c": return "application/pkcs7-mime";
			case "p7m": return "application/pkcs7-mime";
			case "p7r": return "application/x-pkcs7-certreqresp";
			case "p7s": return "application/pkcs7-signature";
			case "pc5": return "application/x-pc5";
			case "pci": return "application/x-pci";
			case "pcl": return "application/x-pcl";
			case "pcx": return "application/x-pcx";
			case "pdf": return "application/pdf";
			case "pdx": return "application/vnd.adobe.pdx";
			case "pfx": return "application/x-pkcs12";
			case "pgl": return "application/x-pgl";
			case "pic": return "application/x-pic";
			case "pko": return "application/vnd.ms-pki.pko";
			case "pl": return "application/x-perl";
			case "plg": return "text/html";
			case "pls": return "audio/scpls";
			case "plt": return "application/x-plt";
			case "pot": return "application/vnd.ms-powerpoint";
			case "ppa": return "application/vnd.ms-powerpoint";
			case "ppm": return "application/x-ppm";
			case "pps": return "application/vnd.ms-powerpoint";
			case "pr": return "application/x-pr";
			case "prf": return "application/pics-rules";
			case "prn": return "application/x-prn";
			case "prt": return "application/x-prt";
			case "ps": return "application/x-ps";
			case "ptn": return "application/x-ptn";
			case "pwz": return "application/vnd.ms-powerpoint";
			case "r3t": return "text/vnd.rn-realtext3d";
			case "ras": return "application/x-ras";
			case "rat": return "application/rat-file";
			case "rdf": return "text/xml";
			case "rec": return "application/vnd.rn-recording";
			case "red": return "application/x-red";
			case "rgb": return "application/x-rgb";
			case "rjs": return "application/vnd.rn-realsystem-rjs";
			case "rjt": return "application/vnd.rn-realsystem-rjt";
			case "rlc": return "application/x-rlc";
			case "rle": return "application/x-rle";
			case "rmf": return "application/vnd.adobe.rmf";
			case "rmi": return "audio/mid";
			case "rmj": return "application/vnd.rn-realsystem-rmj";
			case "rmm": return "audio/x-pn-realaudio";
			case "rmp": return "application/vnd.rn-rn_music_package";
			case "rms": return "application/vnd.rn-realmedia-secure";
			case "rmx": return "application/vnd.rn-realsystem-rmx";
			case "rnx": return "application/vnd.rn-realplayer";
			case "rp": return "image/vnd.rn-realpix";
			case "rpm": return "audio/x-pn-realaudio-plugin";
			case "rsml": return "application/vnd.rn-rsml";
			case "rt": return "text/vnd.rn-realtext";
			case "rtf": return "application/msword";
			case "rv": return "video/vnd.rn-realvideo";
			case "sam": return "application/x-sam";
			case "sat": return "application/x-sat";
			case "sdp": return "application/sdp";
			case "sdw": return "application/x-sdw";
			case "sit": return "application/x-stuffit";
			case "slb": return "application/x-slb";
			case "sld": return "application/x-sld";
			case "slk": return "drawing/x-slk";
			case "smi": return "application/smil";
			case "smil": return "application/smil";
			case "smk": return "application/x-smk";
			case "snd": return "audio/basic";
			case "sol": return "text/plain";
			case "sor": return "text/plain";
			case "spc": return "application/x-pkcs7-certificates";
			case "spl": return "application/futuresplash";
			case "spp": return "text/xml";
			case "ssm": return "application/streamingmedia";
			case "sst": return "application/vnd.ms-pki.certstore";
			case "stl": return "application/vnd.ms-pki.stl";
			case "stm": return "text/html";
			case "sty": return "application/x-sty";
			case "svg": return "text/xml";
			case "tdf": return "application/x-tdf";
			case "tg4": return "application/x-tg4";
			case "tga": return "application/x-tga";
			case "tld": return "text/xml";
			case "top": return "drawing/x-top";
			case "tsd": return "text/xml";
			case "txt": return "text/plain";
			case "uin": return "application/x-icq";
			case "uls": return "text/iuls";
			case "vcf": return "text/x-vcard";
			case "vda": return "application/x-vda";
			case "vdx": return "application/vnd.visio";
			case "vml": return "text/xml";
			case "vpg": return "application/x-vpeg005";
			case "vsd": return "application/vnd.visio";
			case "vss": return "application/vnd.visio";
			case "vst": return "application/vnd.visio";
			case "vsw": return "application/vnd.visio";
			case "vsx": return "application/vnd.visio";
			case "vtx": return "application/vnd.visio";
			case "vxml": return "text/xml";
			case "wax": return "audio/x-ms-wax";
			case "wb1": return "application/x-wb1";
			case "wb2": return "application/x-wb2";
			case "wb3": return "application/x-wb3";
			case "wbmp": return "image/vnd.wap.wbmp";
			case "wiz": return "application/msword";
			case "wk3": return "application/x-wk3";
			case "wk4": return "application/x-wk4";
			case "wkq": return "application/x-wkq";
			case "wks": return "application/x-wks";
			case "wm": return "video/x-ms-wm";
			case "wmd": return "application/x-ms-wmd";
			case "wmf": return "application/x-wmf";
			case "wmx": return "video/x-ms-wmx";
			case "wmz": return "application/x-ms-wmz";
			case "wp6": return "application/x-wp6";
			case "wpd": return "application/x-wpd";
			case "wpg": return "application/x-wpg";
			case "wpl": return "application/vnd.ms-wpl";
			case "wq1": return "application/x-wq1";
			case "wr1": return "application/x-wr1";
			case "wri": return "application/x-wri";
			case "wrk": return "application/x-wrk";
			case "ws": return "application/x-ws";
			case "ws2": return "application/x-ws";
			case "wsc": return "text/scriptlet";
			case "wvx": return "video/x-ms-wvx";
			case "xdp": return "application/vnd.adobe.xdp";
			case "xdr": return "text/xml";
			case "xfd": return "application/vnd.adobe.xfd";
			case "xfdf": return "application/vnd.adobe.xfdf";
			case "xq": return "text/xml";
			case "xql": return "text/xml";
			case "xquery": return "text/xml";
			case "xwd": return "application/x-xwd";
			case "x_b": return "application/x-x_b";
			case "x_t": return "application/x-x_t";
		}
		return "application/octet-stream";
	}

}

2、修改config.json文件:
(1) “imageUrlPrefix”: “/project/api/ueditor/show?path=”, /* 圖片訪問路徑前綴 ,顯示圖片時調用的接口,即項目名+接口名+參數名,也就是上述controller類中的第二個接口*/
(2)“imagePathFormat”: “dev/project/{yyyy}{mm}{dd}/{filename}”, /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
同樣的,對於不同格式的文件,均可以設置這兩項屬性,而其他屬性基本不用修改,若有需要可以進行修改。

/* 前後端通信相關的配置,註釋只允許使用多行方式 */
{
  /* 上傳圖片配置項 */
  "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
  "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
  "imageMaxSize": 2048000, /* 上傳大小限制,單位B */
  "imageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 上傳圖片格式顯示 */
  "imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
  "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
  "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
  "imageUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "imageSaveAbsolutePath": "", /* 文件保存路徑 */
  "imageFtpUpload": false, /*是否FTP OSS上傳*/
  "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  /* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
  /* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
  /* {time} 會替換成時間戳 */
  /* {yyyy} 會替換成四位年份 */
  /* {yy} 會替換成兩位年份 */
  /* {mm} 會替換成兩位月份 */
  /* {dd} 會替換成兩位日期 */
  /* {hh} 會替換成兩位小時 */
  /* {ii} 會替換成兩位分鐘 */
  /* {ss} 會替換成兩位秒 */
  /* 非法字符 \ : * ? " < > | */
  /* 具請體看線上文檔: fex.baidu.com/#use-format_upload_filename */

  /* 塗鴉圖片上傳配置項 */
  "scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */
  "scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */
  "scrawlPathFormat": "upload/scraw/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "scrawlMaxSize": 2048000, /* 上傳大小限制,單位B */
  "scrawlUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "scrawlSaveAbsolutePath": "", /* 文件保存路徑 */
  "scrawlFtpUpload": false, /*是否FTP  OSS上傳*/
  "scrawlInsertAlign": "none",

  /* 截圖工具上傳 */
  "snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */
  "snapscreenPathFormat": "upload/screen/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "snapscreenUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "snapscreenSaveAbsolutePath": "", /* 文件保存路徑 */
  "snapscreenFtpUpload": false, /*是否FTP 上傳*/
  "snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */

  /* 抓取遠程圖片配置 */
  "catcherLocalDomain": [ "127.0.0.1", "localhost", "img.baidu.com" ],
  "catcherActionName": "catchimage", /* 執行抓取遠程圖片的action名稱 */
  "catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
  "catcherPathFormat": "upload/catcher/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "catcherUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "catcherSaveAbsolutePath": "", /* 文件保存路徑 */
  "catcherFtpUpload": false, /*是否FTP 上傳*/
  "catcherMaxSize": 2048000, /* 上傳大小限制,單位B */
  "catcherAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 抓取圖片格式顯示 */

  /* 上傳視頻配置 */
  "videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
  "videoFieldName": "upfile", /* 提交的視頻表單名稱 */
  "videoPathFormat": "upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "videoUrlPrefix": "/", /* 視頻訪問路徑前綴 */
  "videoSaveAbsolutePath": "", /* 文件保存路徑 */
  "videoFtpUpload": false, /*是否FTP OSS上傳*/
  "videoMaxSize": 102400000, /* 上傳大小限制,單位B,默認100MB */
  "videoAllowFiles": [
    ".flv",
    ".swf",
    ".mkv",
    ".avi",
    ".rm",
    ".rmvb",
    ".mpeg",
    ".mpg",
    ".ogg",
    ".ogv",
    ".mov",
    ".wmv",
    ".mp4",
    ".webm",
    ".mp3",
    ".wav",
    ".mid"
  ], /* 上傳視頻格式顯示 */

  /* 上傳文件配置 */
  "fileActionName": "uploadfile", /* controller裏,執行上傳視頻的action名稱 */
  "fileFieldName": "upfile", /* 提交的文件表單名稱 */
  "filePathFormat": "upload/file/{yyyy}{mm}{dd}/{filename}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
  "fileUrlPrefix": "/", /* 文件訪問路徑前綴 */
  "fileSaveAbsolutePath": "", /* 文件保存路徑 */
  "fileFtpUpload": false, /*是否FTP OSS上傳*/
  "fileMaxSize": 51200000, /* 上傳大小限制,單位B,默認50MB */
  "fileAllowFiles": [
    ".png",
    ".jpg",
    ".jpeg",
    ".gif",
    ".bmp",
    ".flv",
    ".swf",
    ".mkv",
    ".avi",
    ".rm",
    ".rmvb",
    ".mpeg",
    ".mpg",
    ".ogg",
    ".ogv",
    ".mov",
    ".wmv",
    ".mp4",
    ".webm",
    ".mp3",
    ".wav",
    ".mid",
    ".rar",
    ".zip",
    ".tar",
    ".gz",
    ".7z",
    ".bz2",
    ".cab",
    ".iso",
    ".doc",
    ".docx",
    ".xls",
    ".xlsx",
    ".ppt",
    ".pptx",
    ".pdf",
    ".txt",
    ".md",
    ".xml"
  ], /* 上傳文件格式顯示 */

  /* 列出指定目錄下的圖片 */
  "imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */
  "imageManagerListPath": "upload", /* 指定要列出圖片的目錄 */
  "imageManagerListSize": 20, /* 每次列出文件數量 */
  "imageManagerUrlPrefix": "/", /* 圖片訪問路徑前綴 */
  "imageManagerSaveAbsolutePath": "", /* 文件保存路徑 */
  "imageManagerFtpUpload": false, /*是否FTP  OSS上傳*/
  "imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */
  "imageManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp" ], /* 列出的文件類型 */

  /* 列出指定目錄下的文件 */
  "fileManagerActionName": "listfile", /* 執行文件管理的action名稱 */
  "fileManagerListPath": "upload/file", /* 指定要列出文件的目錄 */
  "fileManagerUrlPrefix": "/", /* 文件訪問路徑前綴 */
  "fileManagerSaveAbsolutePath": "", /* 文件保存路徑 */
  "fileManagerFtpUpload": false, /*是否FTP OSS上傳*/
  "fileManagerListSize": 20, /* 每次列出文件數量 */
  "fileManagerAllowFiles": [
    ".png",
    ".jpg",
    ".jpeg",
    ".gif",
    ".bmp",
    ".flv",
    ".swf",
    ".mkv",
    ".avi",
    ".rm",
    ".rmvb",
    ".mpeg",
    ".mpg",
    ".ogg",
    ".ogv",
    ".mov",
    ".wmv",
    ".mp4",
    ".webm",
    ".mp3",
    ".wav",
    ".mid",
    ".rar",
    ".zip",
    ".tar",
    ".gz",
    ".7z",
    ".bz2",
    ".cab",
    ".iso",
    ".doc",
    ".docx",
    ".xls",
    ".xlsx",
    ".ppt",
    ".pptx",
    ".pdf",
    ".txt",
    ".md",
    ".xml"
  ] /* 列出的文件類型 */
}

3、將前端代碼中的ueditor.config.js文件中的serverUrl屬性的值設置爲上述controller類中上傳文件的接口的訪問地址,如:

serverUrl:  http://localhost:8080/project/api/ueditor/exec

4、重寫java代碼:
前端在訪問exec接口上傳圖片時,會傳遞一個action參數,exec接口中根據action的值,在ActionEnter類中的invoke方法中進行不同的處理:

public String invoke() {
		.........//省略
		switch ( actionCode ) {
			case ActionMap.CONFIG:
				return this.configManager.getAllConfig().toString();
			case ActionMap.UPLOAD_IMAGE:
			case ActionMap.UPLOAD_SCRAWL:
			case ActionMap.UPLOAD_VIDEO:
			case ActionMap.UPLOAD_FILE:
				conf = this.configManager.getConfig( actionCode );
				state = new Uploader( request, conf ).doExec();
				break;
			case ActionMap.CATCH_IMAGE:
				conf = configManager.getConfig( actionCode );
				String[] list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
				state = new ImageHunter( conf ).capture( list );
				break;
			case ActionMap.LIST_IMAGE:
			case ActionMap.LIST_FILE:
				conf = configManager.getConfig( actionCode );
				int start = this.getStartIndex();
				state = new FileManager( conf ).listFile( start );
				break;
		}
		.........//省略
	}

上述每個case對應不同類型文件的上傳邏輯,可以根據自己的需要重寫對應的case中的方法。
5、如本項目主要是上傳圖片和視頻,則需要重寫上述第5個case中的doExec()方法。
經過方法逐步追蹤,發現,圖片和視頻上傳的邏輯在BinaryUploader類中的save方法。
6、修改jBinaryUploader類中的save方法:

public static final State save(HttpServletRequest request, Map<String, Object> conf) {
       Part file = null;
       try {
           Collection<Part> parts = request.getParts();
           if (CollectionUtils.isEmpty(parts)) {
               return new BaseState(false, 7);
           }
           Iterator<Part> iterator = parts.iterator();
           while (iterator.hasNext()) {
               Part partFile = iterator.next();
               if (StringUtils.isNotEmpty(partFile.getSubmittedFileName())) {
                   file = partFile;
               }
           }

           if (file == null) {
               return new BaseState(false, 7);
           }
           //從config.json文件中獲得文件上傳名稱的格式
           String savePath = (String) conf.get("savePath");
           String originFileName = file.getSubmittedFileName();
           String suffix = FileType.getSuffixByFilename(originFileName);

           originFileName = originFileName.substring(0,
                   originFileName.length() - suffix.length());
           savePath = savePath + suffix;

           long maxSize = ((Long) conf.get("maxSize")).longValue();
           if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
               return new BaseState(false, 8);
           }
           //根據讀取到的文件名格式對文件名進行格式化
           savePath = PathFormat.parse(savePath, originFileName);

           InputStream is = file.getInputStream();

           //上傳文件至服務器
           State storageState = StorageManager.saveFileByInputStream(is,
                   savePath, maxSize);
           is.close();
           if (storageState.isSuccess()) {
               storageState.putInfo("type", suffix);
               storageState.putInfo("original", originFileName + suffix);
           }
           return storageState;
       } catch (Exception e) {
           return new BaseState(false, 6);
       }
   }

7、修改StorageManager類中的saveTmpFile方法,在此方法中編寫上傳至FTP服務器的業務,上傳成功之後記得刪除臨時文件。
可在此方法結束時,設置返回的url:

private static State saveTmpFile(File tmpFile, String path) {
        State state = null;
        String ftpDirectory = ConfigUeditorApi.getFtpDirectory();
        String pathname = ftpDirectory + "/portals/" + DateFormatUtils.format(new Date(), "yyyyMMdd/");
        String suffixName = path.substring(path.lastIndexOf("."));
        // 重命名文件名
        String filename = UUIDUtil.uuid() + suffixName;
        try {
           //上傳至Ftp
            InputStream inputStream = new FileInputStream(tmpFile);
            
            //上傳文件至FTP服務器的工具類,可在網上自行百度
            boolean result = FtpUtil.uploadFileToPool(pathname, filename, inputStream);
            int num = 1;
            //失敗時重試5次
            while (!result && num <= 5) {
                result = FtpUtil.uploadFileToPool("portals", tmpFile.getName(), inputStream);
                num++;
            }
            if (!result) {
                return new BaseState(false, 4);
            }
            //刪除臨時文件
            FileUtils.deleteQuietly(tmpFile);
        } catch (IOException e) {
            return new BaseState(false, 4);
        }
        state = new BaseState(true);
        state.putInfo("size", tmpFile.length());
        state.putInfo("title", filename);
        //文件上傳至FTP後的存儲路徑,即以後的訪問路徑
        state.putInfo("url", PathFormat.format(pathname + filename));
        return state;
    }

8、上述第7步執行完畢後,此時圖片以成功上傳至FTP服務器。ueditor上傳圖片後,同時會回調上述controller類中的show接口,進行圖片回顯,回顯圖片的地址可在config.json中的imageUrlPrefix屬性進行設置。

至此,就可以完成文件的上傳與回顯:
在這裏插入圖片描述

踩過的坑:

1、前後端分離項目會出現端口號問題,請求不到後臺。如前端端口是8000,而後端項目是8080,此時,要在ueditor.config.js文件中的UEDITOR_HOME_URL變量和serverUrl變量上均加上項目的前綴。如:
UEDITOR_HOME_URL: http://localhost:8080/project/static/ueditor1_4_3_3/;
serverUrl: http://localhost:8080/project/api/ueditor/exec

2、controller中的exec接口一定要按照文中的設置contentType,前端讀取config.json配置文件時,後端需要返回一個js文件,否則瀏覽器會報錯,加載富文本編輯器時無法初始化配置文件;而上傳文件時,後端需要返回text,否則瀏覽器也會報錯。

3、回顯圖片時,一定要根據文件類型設置對應的ContentType,否則顯示圖片時,是下載了該圖片至本地,而不是回顯在界面上。

4、ueditor源碼包一定要去官網下載,以防代碼裏有坑。有可能會有人上傳假包害人。。。切記切記。。

5、上述controller類中獲取文件類型的方法,可根據需要自行刪減。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章