本来我以为图片上传没什么可写的,没想到啊啊…! 算了不吐槽了,看下面吧!
既然是图片上传嘛!我就顺手搭建了一个SpringBoot的小项目来实现上传图片的功能(功能真的是忘得差不多了,毕竟是自学的,还没动手实践过!!!)
其实这里不光有editor.md的图片上传,还有SpringBoot的图片上传和回显的知识
如果又不了解的东西,可以看我上一篇文章:
使用editor的第一天:页面展示(简单示例和完整示例)
先说正题——editor的图片上传
-
相对于之前静态资源的改动如下:
添加了plugins文件夹(其中包含emoji表情,科学公式,流程图等等的js文件) -
在官方示例中有如下的配置
Settings
javascript
{
imageUpload : false,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php", //这个是上传图片时的访问地址
}
JSON data
{
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
- 接下来是我搭建的用来整合editor编辑器的SpringBoot的程序
这个代码的结构图(暂时是这样):
引入的依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.57</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
配置文件
server:
port: 8080
# 自定义的上传路径
uploadPath: 自定义的上传路径(磁盘的物理地址,如:C:\\)
# spring相关配置
spring:
application:
name: ProgramerNote
# thymeleaf模板配置
thymeleaf:
check-template: true
prefix: classpath:/templates/
suffix: .html
mode: HTML5
cache: false
servlet:
content-type: text/html
encoding: UTF-8
# servlet上传文件相关配置
servlet:
multipart:
location:
enabled: true
# 单个文件的最大值
max-file-size: 10MB
# 上传文件总的最大值
max-request-size: 10MB
# 将自定义的上传路径,加入到项目资源中
mvc:
static-path-pattern: /**
resources:
static-locations:classpath:/META-INF/resources/,classpath:/resources/,
classpath:/static/,classpath:/public/,file:${uploadPath}
图片上传相关的代码
上传的具体方法:UploadFile.java
package com.bp.programernote.common;
import com.alibaba.fastjson.JSONObject;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
/**
* @E-mail sssrrr879@126.com
* @Date Create on 2019/5/4/004 2:07
*/
public class UploadFile {
/**
* 图片上传 返回editor要求的json串
* @return JSONObject
*/
public JSONObject uploadImgFile(HttpServletRequest request, String filePath, MultipartFile file ){
// 获取完整的文件名
String trueFileName = file.getOriginalFilename();
// 获取文件后缀名
String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));
// 生成新文件的名字
String fileName = System.currentTimeMillis()+"_"+ CommonUtils.getRandomNumber(100, 999)+suffix;
// 获取项目地址
String itemPath = CommonUtils.getItemPath(request);
// 判断当前要上传的路径是否存在
File targetFile = new File(filePath, fileName);
if(!targetFile.exists()){
targetFile.getParentFile().mkdirs();
}
//保存文件
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
JSONObject res = new JSONObject();
// 图片上传后地址
res.put("url", itemPath+fileName); ///图片地址和上传后的文件名
// 图片上传的状态 1成功0失败
res.put("success", 1);
// 图片上传回传的信息
res.put("message", "upload success!");
return res;
}
}
图片上传的Controller代码:EditorUploadControllerImpl.java
package com.bp.programernote.controller.Impl;
import com.alibaba.fastjson.JSONObject;
import com.bp.programernote.common.CommonUtils;
import com.bp.programernote.common.UploadFile;
import com.bp.programernote.controller.EditorUploadController;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
/**
* @E-mail sssrrr879@126.com
* @Date Create on 2019/5/3/003 2:01
*/
@Controller
public class EditorUploadControllerImpl implements EditorUploadController {
// 获取配置文件的配置信息
@Value("${uploadPath}")
public String uploadPath;
@Override
public JSONObject uploadImg(MultipartFile file, HttpServletRequest request) {
// 使用自定义的上传路径
String path = this.uploadPath;
// 调用上传图片的方法
UploadFile uploadImg = new UploadFile();
JSONObject res = uploadImg.uploadImgFile(request,path,file);
return res;
}
}
完整的HTML页面:editor.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/editormd.css" />
<!--<link rel="stylesheet" href="../css/katex.min.css" />-->
</head>
<body>
<div id="deditor">
<textarea style="display:none;"></textarea>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/editormd.js"></script>
<!--<script src="../js/katex.min.js"></script>-->
<script src="/lib/marked.min.js"></script>
<script src="/lib/prettify.min.js"></script>
<script src="/lib/raphael.min.js"></script>
<script src="/lib/underscore.min.js"></script>
<script src="/lib/sequence-diagram.min.js"></script>
<script src="/lib/flowchart.min.js"></script>
<script src="/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript">
var testEditor;
$(function () {
$.get('/test.md', function(md){
testEditor = editormd({
id:"deditor",//注意:这里是上面DIV的id
width:"90%",
height:640,
syncScrolling: "single",
path:"/lib/",
theme : "dark",
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : md,
codeFold : true,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持,默认关闭
flowChart : true, // 开启流程图支持,默认关闭
sequenceDiagram : true, // 开启时序/序列图支持,默认关闭,
dialogLockScreen : false, // 设置弹出层对话框不锁屏,全局通用,默认为true
dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true
dialogDraggable : false, // 设置弹出层对话框不可拖动,全局通用,默认为true
dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度,全局通用,默认值为0.1
dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
/**上传图片相关配置如下*/
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/upload/editormdImg/", //这个是上传图片时的访问地址
onload : function() {
//console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});});
</script>
</body>
</html>
到此,editor的图片上传就算结束了,
其中有几个我认为比较坑的的地方
图片上传到自定义文件夹并回显
加入如下配置即可
# file:{}是指定当前物理磁盘的路径
uploadPath: 自定义的上传路径(磁盘的物理地址,如:C:\\)
spring:
mvc:
static-path-pattern: /**
resources:
static-locations: classpath:/META-INF/resources/,classpath:/resources/,
classpath:/static/,classpath:/public/,file:${uploadPath}
SpringBoot的项目启动路径不能够自动获取
因为之前学习的时候记得是可以获取到的,可能一时忘记了,没办法又自己写了一个方法:
public static String getItemPath(HttpServletRequest request){
String scheme = request.getScheme(); // 获取链接协议,http
String serverName = request.getServerName(); // 获取服务器名称 localhost
int serverPort = request.getServerPort(); // 获取端口 8080
String path = scheme+"://"+serverName+":"+serverPort+"/";
return path;
}
感谢看到这里的朋友,此文应该还会有后续的(因为代码我还没有写完呢[\偷笑])