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));
![[图形学] 射线和线段之间的最小距离](https://img-blog.csdnimg.cn/43d939f067184d738ea9636d5fca92e9.png#pic_center)
