Springboot+kindeditor 前后端分离 解决跨域 希望能帮助到你
首先感谢这一位老哥的代码 https://www.cnblogs.com/huobi/p/9794165.html 写完了之后感觉每次都需要根据需求去修改一些值。自己又重新修改了一下。话不多说直接上代码。
1. 首先导入kindeditor的jar包 kindeditor官网**：http://kindeditor.net/demo.php
2. 创建一个html页面，直接粘粘上去即可
<html>
<head>
<meta charset="UTF-8">
<script src="kindeditor-all-min.js"></script>
<script src="zh_CN.js"></script>
<script src="jquery.min.js"></script>
<title></title>
</head>
<body>
<textarea id="txtEditor" name="content1" style="height: 300px;width: 100%;"></textarea>
</body>
<script>
var callback = "redirect.html";
var editor1;
var editor = KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="content1"]', {
uploadJson : 'http://127.0.0.1:9090/upmethod?callBackPath='+callback,
fileManagerJson : '../jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
},//上传文件后执行的回调函数,获取上传图片的路径
afterUpload: function (url) {
console.log(url)
}
});
});
</script>
</html>
看看效果：
看到上图效果说明你已经成功一半啦哈哈
3.创建redirect.html 一定要要和这个页面平级，redirect.html的作用是解决frame域的问题 。
这个页面不要操作直接粘贴就行了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ie </title>
<script type="text/javascript">
function getParameter(val) {
var uri = decodeURI(window.location.search);
var re = new RegExp("" + val + "=([^&?]*)", "ig");
return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
}
var upload_callback = function() {
var error = getParameter("error");
error = parseInt(error)
var dataObject;
if(error==0){
var url = getParameter("url");
dataObject = {"error": error, "url": url};
}else{
var message = getParameter("message");
dataObject = {"error": error, "message": message};
}
var data = JSON.stringify(dataObject)
document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
}
</script>
</head>
<body onload="upload_callback();">
</body>
</html>
4.接下来咱们完成剩下的百分之五十，后台代码
mavaen依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1</version>
</dependency>
@ResponseBody
@RequestMapping("/upmethod")
public void uploadMethod(@RequestParam String callBackPath, @RequestParam(value = "imgFile", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws FileUploadException, IOException {
String scheme = request.getScheme();//http
String serverName = request.getServerName();//localhost
// int serverPort = request.getServerPort();//8080
// String contextPath = request.getContextPath();//项目名
//String url = scheme + "://" + serverName + ":" + serverPort + contextPath;//http://127.0.0.1:8080/test
String url = scheme + "://" + serverName +":8080";//http://127.0.0.1:8080
String referer = request.getHeader("referer");
Pattern p = Pattern.compile("([a-z]*:(//[^/?#]+/[^/?#]*/)?)", Pattern.CASE_INSENSITIVE);
Matcher mathcer = p.matcher(referer);
if (mathcer.find()){
String htmlheader = mathcer.group();// 请求来源
response.setContentType("text/html;charset=UTF-8");
String savePath = "D://Img_Cache/";
String saveUrl = request.getContextPath();
//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
//最大文件大小
long maxSize = 100000000;
response.setContentType("text/html; charset=UTF-8");
if (!ServletFileUpload.isMultipartContent(request)) {
System.out.println("请选择文件。");
response.sendRedirect(getError(htmlheader,"请选择文件.", callBackPath));
return;
}
//检查目录
File uploadDir = new File(savePath);
if (!uploadDir.isDirectory()) {
System.out.println("上传目录不存在。");
response.sendRedirect(getError(htmlheader,"上传目录不存在。", callBackPath));
return;
}
//检查目录写权限
if (!uploadDir.canWrite()) {
System.out.println("上传目录没有写权限。");
response.sendRedirect(getError(htmlheader,"上传目录没有写权限。", callBackPath));
return;
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if (!extMap.containsKey(dirName)) {
System.out.println("目录名不正确。");
response.sendRedirect(getError(htmlheader,"目录名不正确。", callBackPath));
return;
}
//创建文件夹
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
String fileName = file.getOriginalFilename();
long fileSize = file.getSize();
// if (!item.isFormField()) {
//检查文件大小
if (file.getSize() > maxSize) {
System.out.println("上传文件大小超过限制。");
response.sendRedirect(getError(htmlheader,"上传文件大小超过限制。", callBackPath));
return;
}
//检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) {
System.out.println("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。");
response.sendRedirect(getError(htmlheader,"上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。", callBackPath));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try {
File uploadedFile = new File(savePath, newFileName);
OutputStream os = new FileOutputStream(uploadedFile);
InputStream inputStream = file.getInputStream();
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
os.write(buf, 0, length);
}
inputStream.close();
os.close();
} catch (Exception e) {
System.out.println("上传文件失败。");
response.sendRedirect(getError(htmlheader,"上传文件失败。", callBackPath));
return;
}
Map<String, Object> msgMap = new HashMap<String, Object>();
msgMap.put("error", 0);
msgMap.put("url", "");
String urlString = "";
//根据自己实际情况做修改
//urlString = "http://localhost:63342/Beginner_admin/" + callBackPath + "?error=0&url=" + "http://192.168.2.158:8080/file/" + saveUrl + newFileName;
urlString = htmlheader + callBackPath + "?error=0&url=" + url+"/file/" + saveUrl + newFileName;
System.out.println(urlString);
response.sendRedirect(urlString);
}
}
private String getError(String htmluel,String message, String callBackPath) throws UnsupportedEncodingException {
Map<String, Object> msg = new HashMap<String, Object>();
msg.put("error", 1);
msg.put("message", message);
String urlString = htmluel + callBackPath + "?error=1&message=" + URLEncoder.encode(message, "UTF-8");
return urlString;
}
代码运行可以看到图片成功上传
这里小伙伴可能会有疑惑，为什么访问项目的端口是9090，而图片的显示的地址却是8080
我上传照片之后，用Tomcat映射了路径所以是8080，如果想配置成一样的请看这一篇文章https://blog.csdn.net/weixin_38658548/article/details/105291593
5833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
