使用SpringBoot和KindEditor完成图片批量上传和回显

阅读：评论：0

摘要：

今天开发中用到了KingEditor富文本编辑器，一款功能比较齐全的编辑器，纯jQuery + CSS写成，使用起来比较方便。其中图片上传功能个人很喜欢（因为之前用百度的富文本编辑器没有实现，可能是以前太菜了哈哈），现在记录下来方便以后查看。

本文作者：怡宝的大方哥
作者博客地址：

一、工具准备

KindEditor下载：.php 官网上有对应的demo，感兴趣的可以自行查看。

二、前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html><head><meta charset="utf-8" /><title>MultiImageDialog Examples</title><link rel="stylesheet" href="js/kindeditor-4.1.10/themes/default/default.css" /><script src="js/kindeditor-4.1.10/kindeditor.js"></script><script src="js/kindeditor-4.1.10/lang/zh_CN.js"></script><script&ady(function(K) {var editor = K.editor({filePostName  : "uploadFile",//服务端接收图片的属性名uploadJson : '/uploadImage',//服务端路径allowFileManager : true});K('#J_selectImage').click(function() {editor.loadPlugin('multiimage', function() {editor.plugin.multiImageDialog({clickFn : function(urlList) {var div = K('#J_imageView');div.html('');K.each(urlList, function(i, data) {div.append('<img src="' + data.url + '">');});editor.hideDialog();}});});});});</script></head><body><input type="button" id="J_selectImage" value="批量上传" /><div id="J_imageView"></div></body>
</html>

前端页面是从官网上的Demo，其中修改了默认的图片上传路径和上传文件名：

var editor = K.editor({filePostName  : "uploadFile",//服务端接收图片的属性名uploadJson : '/uploadImage',//服务端路径allowFileManager : true
});

修改完成后运行页面可以看到：页面只有一个按钮，点开后可以选择图片，选择完图片后点击上传按钮，控制台会有一个404的错误，因为我们后端程序还没写。另外KindEditor多图上传底层使用的是ajax异步请求，每张图片对应一个ajax请求。

提示404错误

上传图片页面

三、后端代码

首先看一下KingEditor规定的图片回显的json格式:

//成功时
{"error" : 0,"url" : ".ext"
}
//失败时
{"error" : 1,"message" : "错误信息"
}

参数说明：

error：文件上传状态码，0代表上传成功，1代表上传失败；
url：上传成功后，返回图片回显的路径；
message：上传失败后，返回错误信息。

因此先创建一个VO实体类用于封装返回对象，只封装了error和url：

package com.upload.vo;public class KindImage {private Integer error = 0;	//1表示文件上传失败，0表示成功private String url;        	//路径地址，虚拟的网络空间地址public Integer getError() {return error;}public void setError(Integer error) { = error;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}}

接下来创建UploadController类用于处理文件上传及回显，这里只是一个demo，就没有用到service和mapper层。

图片上传和回显大致流程：

获取源文件并根据后缀判断是否为图片文件；
获取图片的宽度和高度，用于判断是否为真实的图片文件（防止上传修改后缀的恶意文件）；
将图片分目录存储（以时间格式：yyyy/MM/dd）
使用UUID重新生成图片名字
上传图片并回显

直接上代码：

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
SimpleDateFormat;
import java.util.Date;
import java.util.UUID;import javax.imageio.ImageIO;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import com.jt.vo.KindImage;@Controller
public class UploadController {@RequestMapping("/uploadImage")@ResponseBodypublic KindImage uploadFile(MultipartFile uploadFile) {//创建一个KindImage对象KindImage kingImage = new KindImage();//获取源文件名并转换为字母小写String realName = OriginalFilename().toLowerCase();//1. 正则表达式判断文件名if (!realName.matches("^.+\.(jpg|png|gif)$")) {kingImage.setError(1);return kingImage;//不是正确的图片后缀名，返回错误}//2. 获取图片的宽度和高度，用于判断是否为真实的图片文件try {BufferedImage bufferredImage = InputStream());//获取图片的宽和高int height = Height();int width = Width();if (height == 0 || width == 0) {kingImage.setError(1);return kingImage;//不是真实的图片文件，返回错误}} catch (IOException e1) {e1.printStackTrace();kingImage.setError(1);//图片读取出错，返回错误}//3. 将图片分目录存储（以时间格式：yyyy/MM/dd）String dateDir = new SimpleDateFormat("yyyy/MM/dd").format(new Date());//获取当前年月日//String localFileDir = "D:/upload_demo/image/";//本地路径String localFileDir = "D:/demo/upload-demo/src/main/webapp/image/";//本地路径String imagePath = localFileDir + dateDir;//拼接路径File file = new File(imagePath);if (!ists()) file.mkdirs();//若文件路径不存在，创建文件夹（包括父级文件夹）//4.重新生成图片名字String uuid = UUID.randomUUID()//获取String()//转换成字符串格式.replace("-", "");//去掉其中的“-”String FileName = uuid + realName.substring(realName.lastIndexOf("."));//拼接后缀名File filePath = new File(imagePath + "/" + FileName);//拼接路径//5.上传图片try {ansferTo(filePath);//上传图片kingImage.setUrl("image/" + dateDir + "/" + FileName);//图片上传成功，设置回显路径System.out.println("文件上传成功!!!!");} catch (Exception e) {e.printStackTrace();kingImage.setError(1);//图片上传失败，返回错误信息}return kingImage;}
}

注意：这里使用的上传路径是项目的路径，回显路径也是项目的相对路径，需要根据自己项目的实际路径做响应修改。

重新启动服务器，选择图片上传，现在可以看到图片上传成功并成功回显：

图片上传成功

查看本地目录可以看到，图片已经存在，并且图片名改变了：

本地目录

网页上也可以看到回显的图片：

至此，基于SpringBoot和KindEditor的图片上传及回显功能基本实现。

四、思考优化

图片上传以及回显的路径写死在程序里，以后路径要改变就需要改变源码，这样做其实违反了OCP开闭原则（对于扩展开放，对于修改关闭） 。实际项目中，更常用的方式是将路径写在properties配置文件中，然后Controller引用属性值。
图片上传保存的位置在本地，实际应用中如果图片文件数量很多，应该使用一个图片服务器统一保存用户上传的图片。
图片回显的路径一般不会直接暴露给客户端，而是使用反向代理，使用虚拟路径。这里可以使用Nginx服务器实现，具体可以查看我的另一篇文章：SpringBoot中使用Nginx实现反向代理及负载均衡。
本篇中路径的拼接使用的是String类，从效率上考虑应该使用StringBuilder。

本文发布于:2024-02-02 13:28:52，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170685173344115.html

上一篇：python弹幕拼脸

下一篇：【Cell Signaling + 神经递质(neurotransmitter) ；神经肽】

标签：批量上传图片 SpringBoot KindEditor

留言与评论（共有 0 条评论）