自建博客(之editor.md使用,图片上传以及回显)
首先说遇到的问题,在搭建博客的过程中,我遇到了editor.md这个富文本编辑器,不能上传本地图片这样难受的事情,下面废话不多说,直接解决问题
在富文本编辑页面,在javascript中加上 imageUpload : true, //开启图片上传
//初始化Markdown编辑器
var contentEditor;
$(function() {
contentEditor = editormd("md-content", {//注意1:这里的就是上面的DIV的id属性值
placeholder:'本编辑器支持Markdown编辑,左边编写,右边预览', //默认显示的文字,这里就不解释了
width : "100%",
height : 640,
syncScrolling : "single",
// path : "../static/lib/editormd/lib/"
path : "/lib/editormd/lib/",//注意2:你的路径 就是editor的lib目录
saveHTMLToTextarea : true,//注意3:这个配置,方便post提交表单
theme: "dark",//工具栏主题
previewTheme: "dark",//预览主题
editorTheme: "pastel-on-dark",//编辑主题
saveHTMLToTextarea: true,
emoji: false,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持,默认关闭
flowChart: true, // 开启流程图支持,默认关闭
sequenceDiagram: true, // 开启时序/序列图支持,默认关闭,
/**上传图片相关配置如下*/
imageUpload : true, //开启图片上传
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/img/imgUpLoad", //上传的路径,就是mvc的controller路径
});
});
然后创建一个专门用于图片上传的控制类
import cn.hutool.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.UUID;
/** * @ClassName FileUpController * @Description * @Author 51 * @Date 2019年11月28日 上午10:19:12 */
@Controller
@RequestMapping("/img")
public class FileUploadController {
@RequestMapping("/imgUpLoad")
public void imageUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file,
HttpServletRequest request, HttpServletResponse response){
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter wirte = null;
JSONObject json = new JSONObject();
try {
wirte = response.getWriter();
//文件存放的路径
//得到工程的路径:
System.out.println("得到工程的路径:"+System.getProperty("user.dir"));//user.dir指定了当前的路径
//得到工程目录:
System.out.println( "得到工程目录:"+request.getSession().getServletContext().getRealPath("")); //参数可具体到包名
//得到IE地址栏地址 request.getRequestURL()
System.out.println( "得到IE地址栏地址 :"+ request.getRequestURL());
// 得到相对地址:request.getRequestURI()
System.out.println( "得到相对地址:"+ request.getRequestURI());
// String path=request.getServletContext().getRealPath("")+"uploaded";
String path=System.getProperty("user.dir")+"\\src\\main\\resources\\static\\upload\\";
String fileName = file.getOriginalFilename();
fileName= UUID.randomUUID()+fileName.substring(fileName.indexOf("."),fileName.length());
String destFileName=path+fileName;
System.out.println("path:"+path);
File destFile = new File(destFileName);
if(!destFile.exists()){
destFile.getParentFile().mkdirs();
}
//String url =destFileName;
//file.transferTo(destFile);
String url = "http://localhost:8080"
+ "//upload/"
+ fileName;
System.out.println("url:"+url);
file.transferTo(destFile);
json.put("success", 1);
json.put("message", "上传成功");
json.put("url", url);
} catch (IllegalStateException | IOException e) {
json.put("success", 0);
json.put("message", "上传失败");
}finally{
wirte.print(json);
wirte.flush();
wirte.close();
}
}
}
在这里我遇到了很多路径找不到的问题,我输出了很多路径,如果你正在看这篇文章的话,一定要注意好路径的输出,确定好你的图片要存储到那里,以及返回的时候要返回的路径,我这里把所有的路径都列了出来,自己再按自己需要拼接成字符串,进行存储访问,我的保存路径是
String path=System.getProperty("user.dir")+"\\src\\main\\resources\\static\\upload\\";
输出来应该是这个路径
D:\Workspaces\IDEA\blog\src\main\resources\static\upload\
我的返回路径是
String url = "http://localhost:8080"
+ "//upload/"
+ fileName;
输出来返回路径是这个
http://localhost:8080//upload/ad27e6b6-a38d-4afb-9d74-40c4257f107d.png
现在再存储图片发现,图片确实是存储进来了,但是,回显成了问题,访问地址没有出错为什么会显示不出来呢,经过几次是尝试,我发现,当springboot重启后,再访问图片就能回显出来了,那我就开始怀疑是缓存的问题,后来发现也不对,百度了一下,这里涉及到需要配置虚拟路径映射访问,因为对服务器的保护措施导致的,服务器不能对外部暴露真实的资源路径。
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/** * Created by limi on 2017/10/15. */
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//获取文件的真实路径 work_project代表项目工程名 需要更改
String path = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\upload\\";
String os = System.getProperty("os.name");
if (os.toLowerCase().startsWith("win")) {
registry.addResourceHandler("/upload/**").
addResourceLocations("file:" + path);
} else {//linux和mac系统 可以根据逻辑再做处理
registry.addResourceHandler("/upload/**").
addResourceLocations("file:" + path);
}
super.addResourceHandlers(registry);
}
}
修改了一下,图片正常显示就可以了,问题解决!!!