Springboot 整合editormd实现图片上传
果函网这个项目中综合了文章模块 ，文本编辑少不了Markdown编辑器。在众多的开源编辑器中，editormd表现十分出色，自然是众望所归。不bb，直接开始吧
项目结构图
项目结构图，请关注这个箭头指向的文件夹
前端页面
前端页面
整合editormd
editormd在thymeleaf下引入方式
body中的前端代码
js在thymeleaf下的引入方式
初始化editormd
后端处理
后台处理
这个工具类用于保证你上传的图片一定是jpg图片，而不是以jpg结尾的一个文件，可有可无，你也可以自己写保存方法
public class ImageUtil {
public static BufferedImage change2jpg(File f) {
try {
Image i = Toolkit.getDefaultToolkit().createImage(f.getAbsolutePath());
PixelGrabber pg = new PixelGrabber(i, 0, 0, -1, -1, true);
pg.grabPixels();
int width = pg.getWidth(), height = pg.getHeight();
final int[] RGB_MASKS = { 0xFF0000, 0xFF00, 0xFF };
final ColorModel RGB_OPAQUE = new DirectColorModel(32, RGB_MASKS[0], RGB_MASKS[1], RGB_MASKS[2]);
DataBuffer buffer = new DataBufferInt((int[]) pg.getPixels(), pg.getWidth() * pg.getHeight());
WritableRaster raster = Raster.createPackedRaster(buffer, width, height, width, RGB_MASKS, null);
BufferedImage img = new BufferedImage(RGB_OPAQUE, raster, false, null);
return img;
} catch (InterruptedException e) {
e.printStackTrace();
return null;
}
}
public static void resizeImage(File srcFile, int width,int height, File destFile) {
try {
if(!destFile.getParentFile().exists())
destFile.getParentFile().mkdirs();
Image i = ImageIO.read(srcFile);
i = resizeImage(i, width, height);
ImageIO.write((RenderedImage) i, "jpg", destFile);
} catch (IOException e) {
e.printStackTrace();
}
}
public static Image resizeImage(Image srcImage, int width, int height) {
try {
BufferedImage buffImg = null;
buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
buffImg.getGraphics().drawImage(srcImage.getScaledInstance(width, height, Image.SCALE_SMOOTH), 0, 0, null);
return buffImg;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
仅仅这样会出现的问题
如果仅仅这样就开始上传，那么会出各种奇怪的问题，像资源访问，跨域问题，404，真是自己一点一点摸索出来，这些问题早就司空见惯了，WTF（我给这些问题跪了）。我原本采用的是用绝对路径的方式来作为返回的一个url，结果chrom会提示你资源不允许访问，这是chrom浏览器防护的一种措施。那么我们如何来解决这个问题呢？有俩种曲线救国的方式。
- 采用虚拟路径
由于Springboot采用的是内置服务器，所以，这里我们选择采用类配置的方式来完成：
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//获取文件的真实路径
String path = System.getProperty("user.dir") + "\\src\\main\\webapp\\uptextimg\\";
registry.addResourceHandler("/uptextimg/**").addResourceLocations("file:" + path);
super.addResourceHandlers(registry);
}
}
这里面的 addResourceHandler("/uptextimg/") 是你浏览器地址栏里访问的路径
如：http://localhost:8080/你的项目名/uptextimg 。addResourceLocations("file:" + path)则是文件在前台上传到服务器的真正路径，用这样一种方式可以避免chrom的安全检查
- 采用base64编码，自行查阅其它文章，有很多现成的解决办法
你必须要注意的问题
如果你返回的url路径不是正确的，那么上传图片后的预览也是无法实现的，显示的效果就是图裂了
-
这是图片存储在服务器上的真实路径：
File file = new File(imageFolder,image.getOriginalFilename());
System.out.println(file.toString);
我打印出的值是这样：E:\share\src\main\webapp\uptextimg\chris.jpg -
这是你要返回的给前台访问的虚拟路径
看箭头
String url = "http://localhost:8080/share/uptextimg/" + image.getOriginalFilename();、
你的路径不必和这个一摸一样，但是你必须遵守这样的格式：
http://localhost:你的端口号 / 你的项目名 / 你的虚拟路径，否则，会出现404错误。另外，这个jsonObject用的FastJson依赖。
图过程
选图
上传
目标文件夹存在文件
总的来说，还是需要注意路径的问题，这种方式是可以完成这个功能，只是url的尝试需要加量而已。下一篇，我们来实现：editormd更高效的拖拽与粘贴上传
