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

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));

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值