自建博客(之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);
    }
}

修改了一下,图片正常显示就可以了,问题解决!!!

发布了45 篇原创文章 · 获赞 80 · 访问量 2442

猜你喜欢

转载自blog.csdn.net/qq_43925089/article/details/104928616