java期末实训项目（2）

上一次完成了个人博客系统的添加和前端显示功能。
博客是比较简单的纯文本内容，没有涉及到到图片上传。
这次准备把博客的图片上传功能完成

这个博客系统编辑博客使用的是editor.md，
editor.md配置使用：
在html文件里添加js配置代码

$(function() {
        editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "/admin/editormd/lib/",//注意2：你的路径
            saveHTMLToTextarea : true,//注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], //图片上传格式
            imageUploadURL: "/admin/attach/uploadfile",
            onload: function (obj) { //上传成功之后的回调
            }
        });
    });

配置imageUploadURL的图片上传路径，在后端写好对应的接口，

imageUpload: true
imageUpload属性设置为true添加本地图片上传按钮
后端对应的上传文件接口：

 /**
     * 博客图片上传
     * @param file  文件对象
     */
    @ResponseBody
    @PostMapping(value = "/uploadfile")
    public HashMap<String,Object> fileUploadToTencentCloud(
            @RequestParam(name = "editormd-image-file", required = true)
            MultipartFile file
    ) {

        HashMap<String,Object> map = new HashMap();
        try {
            String name = file.getOriginalFilename();
            String s = WebConst.picUrl;

            File tempFile = new File(s+name);
            if(!tempFile.getParentFile().exists()){
                tempFile.getParentFile().mkdirs();//创建父级文件路径
                tempFile.createNewFile();//创建文件
            }

            System.out.println("文件保存路径："+s);
            file.transferTo(tempFile);


            String imgUrl = "/image/upload/"+name;
            map.put("success", 1);
            map.put("message", "上传成功");
            map.put("url", imgUrl);


        } catch (FileNotFoundException e) {
            e.printStackTrace();
            map.put("message", "上传失败");
        } catch (IOException e) {
            e.printStackTrace();
            map.put("message", "上传失败");
        }

        return map;

    }

图片上传路径，我直接把他放到d盘某个目录中，然后配置虚拟路径前端好展示

@Component
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Autowired
    private BaseInterceptor baseInterceptor;


    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 注册拦截器
        registry.addInterceptor(baseInterceptor);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/image/upload/**").addResourceLocations("file:///"+ WebConst.picUrl);
    }
}

配置好虚拟路径后在src属性中可以直接通过/image/upload/+文件名
的方式访问到硬盘上的图片

测试文件上传功能是否能正常运
重新写一篇博客

点击本地上传，上传成功后后端查看图片上传路径
再去目录下查看

测试后文件上传功能完成
然后发表这篇文章，看看前端是否正常

功能完成