关于本篇文章

在写博客的时候，会有上传图片的功能，自己实现一个简单版本 markdown 编辑器附带上传图片功能

案例会涉及到的知识包括但不限于

IntelliJ IDEA
Spring Boot
JavaScript
JQuery
Thymeleaf
Markdown 语法

第一章 markdown 编辑器

markdown 语言转换功能，有很多 js 插件，这里选用 showdown

在Showdowm 官网下载 showdown.min.js，放到项目里

创建一个页面 uploadForm.html

run()方法是将 </code> 中的内容转换成 html</li> </ul> <p>测试结果</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 339px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ad3de9e5fe954dc2b9d6738ecc2e3a61.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ad3de9e5fe954dc2b9d6738ecc2e3a61.jpg" width="650" height="316" alt="Spring 上传图片并将返回的图片地址插入到 Markdown 编辑器_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"> markdown.png </div> </div> <h1>第二章上传图片</h1> <p>后台将提交的图片保存到自定义位置，这个位置的图片可以通过网络路径访问</p> <p>文件结构大致如下</p> <pre><code>src/ +- main/ +- java/ +- com/ +- lee/ +- fileupload/ +- controller/ +- FileUploadRestController.java +- FileuploadApplication.java +- sources/ +- static/ +- showdown.js +- showdown.js.map +- showdown.min.js +- showdown.min.js.map +- template/ +- uploadForm.html +- application.properties </code></pre> <p>首先设置自己电脑放图片的位置，在 application.properties 配置如下：</p> <pre><code class="properties">img.upload-path=/Users/lee/resources/static/img/ spring.resources.static-locations=classpath:/META-NF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${img.upload-path} </code></pre> <ul> <li><p><code>img.upload-path</code> 是图片位置</p></li> <li><p><code>spring.resources.static-locations</code> 需要手动将所有资源添加进去</p></li> </ul> <p>因为 markdown 需要知道图片的网络位置，才能正确获得图片，在这里图片上传成功后会返回图片网络地址，这种情况用 REST API 很合适</p> <pre><code class="java">package com.lee.fileupload.controller; import org.springframework.web.bind.annotation.RestController; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Paths; @RestController @RequestMapping("/api") public class FileUploadRestController { @Value("${img.upload-path}") private String uploadPath; @PostMapping("/") public String handleFileUpload(@RequestParam("file") MultipartFile file) { try { Files.write(Paths.get(uploadPath + file.getOriginalFilename()), file.getBytes()); } catch (IOException e) { e.printStackTrace(); } return "http://localhost:8080/" + file.getOriginalFilename(); } } </code></pre> <p>在 uploadForm.html 页面中添加图片上传，并用 ajax 进行提交和插入返回的图片网络地址</p> <pre><code class="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <form id="uploadImageForm" method="POST" enctype="multipart/form-data" action="/" > <table> <tr><td>File to upload:</td><td><input type="file" name="file" multiple /></td></tr> <tr><td></td><td><input id="upload" type="button" value="Upload" /></td></tr> </table> </form> <textarea id="content" rows="10" onkeyup="run()" style="float: left; margin-right: 100px;">

Spring 上传图片并将返回的图片地址插入到 Markdown 编辑器

目录

关于本篇文章

第一章 markdown 编辑器

你可能感兴趣的:(Spring 上传图片并将返回的图片地址插入到 Markdown 编辑器)