分布式 03 富文本处理插件和图片文件上传

万zp

已于 2023-05-07 20:40:35 修改

阅读量465

点赞数

文章标签： easyui

于 2023-05-07 09:37:31 首次发布

本文链接：https://blog.csdn.net/qq_38757863/article/details/130529397

版权

文章介绍了如何在HTML页面中集成KindEditor富文本编辑器，并通过引入相关JS文件实现图片上传功能。文件上传通过POST请求发送到服务器，控制器处理文件并保存到指定目录。同时，文章提到了文件回显和图片格式验证的部分，确保上传的是安全的图片文件。

摘要由CSDN通过智能技术生成

01.使用富文本编辑器来上传图片文件。
在这里插入图片描述
02.最开始在html文件中去使用相关富文本的插件。
引入相关文件

<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>

在这里插入图片描述

在js中使用富文本插件

<script type="text/javascript">
	$(function(){
		KindEditor.ready(function(){
			KindEditor.create("#editor")
		})
	})
</script>

由于在kindeditor-4.1.10，相关js文件已经声明了一个KindEditor变量，在html文件中去使用这个变量，就等于调用了KindEditor插件。

文件的上传：先使用简单的插件和专门的代码

<body>
	<h1>实现文件长传</h1>
	<!--enctype="开启多媒体标签"  -->
	<form action="http://localhost:8091/file" method="post" 
	enctype="multipart/form-data">
		<input name="fileImage" type="file" />
		<input type="submit" value="提交"/>
	</form>
</body>

创建controller

/*
* 需求：实现文件的上传，上传到D:/img/
* url:http://localhost:8091/file
* 参数：MultipartFile fileImage
* MultipartFile该接口：用来接收多媒体文件
1.2.4业务测试
说明：启动项目，然后打开浏览器，访问：localhost:8091/file.jsp,然后选中对应要提交的文件，进行提
交。提交完成之后打开对应的上传路径，查看是否有提交的资源，具体测试效果如下图所示：
2.使用富文本编辑器实现文件上传
* 返回值结果：String “文件上传成功”
* 注意事项：默认条件下，文件上传的大小不要超过1M
*/
@RestController
public class FileController {
	@RequestMapping("/file")
	public String file(MultipartFile fileImage) throws IllegalStateException, IOException {
		//第一步。文件上传目录结构
		String path="D:/imgs/";
		File file=new File(path);
		//判断file中的额文件路径是否存在
		if(!file.exists()) {//如果这个目录结构不存在的话，创建目录
			file.mkdirs();//多级目录
		}
		//2.获取文件名
		String filename=fileImage.getOriginalFilename();
		//3.拼接文件完整路径
		String filePath=path+filename;
		//4.传文件
		fileImage.transferTo(new File(filePath));
		return "文件上传成功";
	}

}

此时好需要注意到文件的回显，也就是在上传图片时候，在上传界面可以看到相关的图片。

package com.jt.vo;

import org.springframework.util.StringUtils;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class ImageVO {
	private  Integer   error;
	private  String url;
	private  Integer width;
	private  Integer height;
	
	
	public static ImageVO fail() {
		return new ImageVO(1,null,null,null);
	}
	public static ImageVO success(String url,Integer width,Integer height) {
		if(StringUtils.isEmpty(url) || width==null || height==null || width<0 || height<0) {
			return new ImageVO(1,null,null,null);
		}
		return new ImageVO(0,url,width,height);
	}
}

	@RequestMapping("/pic/upload")
	public ImageVO uploadFile(MultipartFile uploadfile)  {
		
		return fileService.uploadFile(uploadfile);
	}

public interface FileService {

	ImageVO uploadFile(MultipartFile uploadfile);

}

@Service
@PropertySource("classpath:/properties/image.properties")
public class FileServiceImpl implements FileService {
//4.设定本地存储的根目录
@Value("${image.localPath}")
private String localPath;
@Value("${image.urlPath}")
private String urlPath;//http://image.jt.com/
@Override
public ImageVO uploadImage(MultipartFile uploadFile) {
/**
* 1.校验是否为图片格式 jpg|png|gif|jpeg
* 2.判断是否为恶意程序，例如：木马.exe.jpg 宽度：？ 高度：？
* 3.按照上传日期生成目录结构进行分目录存储，好处：可以更好地控制图片的数量
* 4.防止图片的重名，利用uuid随机生成图片的名称
*/
//1.需要获取图片的名称 XXX.jpg
String fileName = uploadFile.getOriginalFilename();
//2.利用正则表达式，判断是否为图片
if(!fileName.matches(".+(.png|.jpeg|.gif|.jpg)$")) {
//表示不是图片
return ImageVO.fail();
}
//3.判断是否为恶意程序
try {
3.反向代理
3.1反向代理概念
访问原理如图所示：
BufferedImage
bufferedImage=ImageIO.read(uploadFile.getInputStream());
int width = bufferedImage.getWidth();
int height = bufferedImage.getHeight();
if (width<=0 ||height <=0) {
//表示不是图片
return ImageVO.fail();
}
//5.实现分目录存储，按到上传的时间yyyy/MM/dd/
String datePath=new SimpleDateFormat("yyyy/MM/dd/").format(new
Date());
//5.1拼接本地存储目录 根目录/yyyy/MM/dd/
String fileLocalPath=localPath+datePath;
//5.2判断本地存储目录是否存在
File fileDir=new File(fileLocalPath);
if (!fileDir.exists()) {
//如果不存在，需要创建该目录结构
fileDir.mkdirs();
}
//6.防止图片重名，利用uuid生成图片的名称 uuid.jpg
String uuid=UUID.randomUUID().toString().replace("-", "");
//6.1获取图片的后缀
String fileType = fileName.substring(fileName.lastIndexOf("."));
//6.2拼接图片的名称
String readFileName=uuid+fileType;
//7.实现图片上传
//7.1拼接文件上传完整路径
String realFileName=fileLocalPath+readFileName;
uploadFile.transferTo(new File(realFileName));
//url:http://image.jt.com/yyyy/MM/dd/uuid.jpg
String url=urlPath+datePath+readFileName;
System.out.println(url);
return ImageVO.success(url, width, height);
} catch (IOException e) {
e.printStackTrace();
return ImageVO.fail();
}
}

同时在项目中去创建一个image.properties·

image.localPath=D:/JT_IMAGE/ 
image.urlPath=http://image.jt.com/

BufferedImage介绍：
image是一个抽象类，BufferedImage是其实现类，是一个带缓冲区图像类，主要作用是将一幅图片加载到
内存中（BufferedImage生成的图片在内存里有一个图像缓冲区，利用这个缓冲区我们可以很方便地操作这
个图片），提供获得绘图对象、图像缩放、选择图像平滑度等功能，通常用来做图片大小变换、图片变灰、设
置透明不透明等。
BufferedImage的操作
Java将一副图片加载到内存中的方法：
BufferedImage bufferedImage = ImageIO.read(new FileInputStream(filePath));