上一次完成了个人博客系统的添加和前端显示功能。
博客是比较简单的纯文本内容,没有涉及到到图片上传。
这次准备把博客的图片上传功能完成
这个博客系统编辑博客使用的是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/+文件名
的方式访问到硬盘上的图片
测试文件上传功能是否能正常运
重新写一篇博客
点击本地上传,上传成功后后端查看图片上传路径
再去目录下查看
测试后文件上传功能完成
然后发表这篇文章,看看前端是否正常
功能完成