springboot整合ueditor，图片上传及视频上传（后端）
段良弼
简介
UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。官网提供了jsp、php、asp、asp.net4种配置方式，但没有java的。根据jsp需要返回的数据格式，假装自己是jsp给他返回。以下只提供后端的代码，前端的直接按照官网的配置就行。
工具
以下为工具来源，实际已结合到代码中了。
1.百度vue-ueditor-wrap，下载jsp、utf8的文档，解压
2.进入jsp文件夹，打开config.json，用nodepad++打开或者把后缀改成.txt打开
3.删除注释和多余回车，将代码赋值到实体类的UEDITOR_CONFIG字段
问题
1.图片上传可以，但是多图上传会报跨域。
答:1.最简单的方法就是前端和后端地址同源
2.如果报了Request header field x_requested_with is not allowed by Access-Control-Allow-Headers in preflight response的错误，
就让前端全局搜x_requested_with，应该有3个地方，都注释掉就行
2.图片上传本地可以，但线上会失败
答:本地测试时前端会传过来callback，我们把callback拼接config.json,线上前端不会传过来callback，我们直接返回config.json
代码
1.实体类
import lombok.Data;
@Data
public class Ueditor {
//前端传过来的参数，用于区分是什么请求
public final static String ACTION_CONFIG = "config";
public final static String ACTION_UPLOADIMAGE = "uploadimage";
public final static String ACTION_UPLOADVIDEO = "uploadvideo";
public final static String ACTION_UPLOADFILE = "uploadfile";
//后端返给前端的参数，需要时特定格式
public final static String ACTION_SUCCESS = "SUCCESS";
public final static String ACTION_FAIL = "FAIL";
private String state;
private String url;
private String title;
private String original;
//关键，假装自己是jsp的东西
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" +
" \"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" +
" \"snapscreenActionName\": \"uploadimage\", \n" +
" \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"snapscreenUrlPrefix\": \"\", \n" +
" \"snapscreenInsertAlign\": \"none\",\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" +
" \"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" +
" \"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" +
" \"imageManagerActionName\": \"listimage\",\n" +
" \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
" \"imageManagerListSize\": 20, \n" +
" \"imageManagerUrlPrefix\": \"\", \n" +
" \"imageManagerInsertAlign\": \"none\", \n" +
" \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\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" +
"}";
}
2.图片上传
public Ueditor uploadPicForUeditor(MultipartFile file) {
Ueditor ueditor = new Ueditor();
ueditor.setState(Ueditor.ACTION_SUCCESS);
try {
String s = 上传图片服务器后返回的地址;
ueditor.setTitle(file.getName());
ueditor.setOriginal(file.getOriginalFilename());
ueditor.setUrl(s);
return ueditor;
} catch (IOException e) {
ueditor.setState(Ueditor.ACTION_FAIL);
e.printStackTrace();
}
return ueditor;
}
3.控制层代码
@Slf4j
@RequestMapping("/ueditor")
@Controller
public class UeditorController {
@Resource
UploadService uploadFile;
@RequestMapping(value = "/cos")
@ResponseBody
public Object server(String action, String callback,MultipartFile upfile, HttpServletResponse response) {
Object result = null;
switch (action) {
case Ueditor.ACTION_CONFIG:
String result1 = "";
if (callback != null) {
result1 = callback + "(" + Ueditor.UEDITOR_CONFIG + ")";
} else {
result1 = Ueditor.UEDITOR_CONFIG;
}
try {
response.getWriter().write(result1);//返回的十回调函数
} catch (IOException e) {
e.printStackTrace();
}
break;
case Ueditor.ACTION_UPLOADFILE:
case Ueditor.ACTION_UPLOADVIDEO:
case Ueditor.ACTION_UPLOADIMAGE:
Ueditor ueditor = uploadFile.uploadPicForUeditor(upfile);
result = ueditor;
break;
default:
}
return result;
}
}
类似资料：