整合MarkDown编辑器editor.md的第二天：图片上传（SpringBoot上传图片及回显）

最新推荐文章于 2021-05-11 14:39:07 发布

只剩渣了

最新推荐文章于 2021-05-11 14:39:07 发布

阅读量2.5k

点赞数 4

分类专栏： SpringBoot MarkDown文本编辑器文章标签：自定义路径图片上传 editor编辑器 SpringBoot

本文链接：https://blog.csdn.net/azax4/article/details/89810135

版权

SpringBoot 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

MarkDown文本编辑器

3 篇文章 1 订阅

订阅专栏

本来我以为图片上传没什么可写的，没想到啊啊…! 算了不吐槽了，看下面吧！

既然是图片上传嘛！我就顺手搭建了一个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;
    }

感谢看到这里的朋友，此文应该还会有后续的（因为代码我还没有写完呢[\偷笑]）

只剩渣了

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
6
评论
整合MarkDown编辑器editor.md的第二天：图片上传（SpringBoot上传图片及回显）

本来我以为图片上传没什么可写的，没想到啊啊…! 算了不吐槽了，看下面吧！既然是图片上传嘛！我就顺手搭建了一个SpringBoot的小项目来实现上传图片的功能（功能真的是忘得差不多了，毕竟是自学的，还没动手实践过！！！）其实这里不光有editor.md的图片上传，还有SpringBoot的图片上传和回显的知识如果又不了解的东西，可以看我上一篇文章：使用editor的第一天：页面展示（简单示例...
复制链接

扫一扫