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包:
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 conf) {
Part file = null;
try {
Collection parts = request.getParts();
if (CollectionUtils.isEmpty(parts)) {
return new BaseState(false, 7);
}
Iterator 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类中获取文件类型的方法,可根据需要自行删减。