springboot之文件上传、图片预览（thymeleaf+layui）
springboot自带图片服务器，但是一般我们都不会用，文件这一块因为灵活性比较高，可能每个公司的都不一样，因此最好还是自己来搞定。
一、思路
1、上传
①.使用spring的正常上传，文件存储路径为磁盘任意位置，可配置
②.业务表中存附件id
③.前端使用Layui
2、预览
①.使用nginx代理，只需要根据附件id获取图片路径即可
二、上传
1.建表
CREATE TABLE `sys_accessory` (
`id` varchar(32) DEFAULT NULL,
`original_name` varchar(256) DEFAULT NULL COMMENT '原文件名\n',
`file_size` int(11) DEFAULT NULL COMMENT '文件大小（单位：字节）',
`path` varchar(256) DEFAULT NULL COMMENT '存储路径',
`category` varchar(32) DEFAULT NULL COMMENT '分类',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`create_user` varchar(32) DEFAULT NULL COMMENT '创建人',
`is_del` char(1) DEFAULT NULL COMMENT '是否删除（1：是，0：否）'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='附件表';
2.文件上传的主要代码
上传的返回值是附件id，因为上传后其他操作需要（比如保存用户头像）需要用到
@RequestMapping("upload")
public ResultModel upload(@RequestParam("file") MultipartFile file, String userId, @RequestParam("category") String category) {
String originalName = file.getOriginalFilename();
long fileSize = file.getSize();
String ext = originalName.substring(originalName.lastIndexOf(".") + 1, originalName.length());
String tmpName = genTmpFileName();
String path = File.separator + category + File.separator + tmpName + "." + ext;
try {
File targetFile = new File(uploadBasePath + path);
if (!targetFile.getParentFile().exists()){
targetFile.getParentFile().mkdirs();
}
file.transferTo(targetFile);
SysAccessory accessory = getAcc(userId,originalName,Integer.parseInt(String.valueOf(fileSize)),path,category);
return sysAccessoryService.upload(accessory);
} catch (IOException e) {
e.printStackTrace();
}
return ResultModel.defaultError(null);
}
private SysAccessory getAcc(String userId, String originalName, Integer fileSize, String path, String category) {
SysAccessory accessory = new SysAccessory();
accessory.setCreateTime(new Date());
accessory.setCreateUser(userId);
accessory.setIsDel(Constants.NEGATIVE);
accessory.setOriginalName(originalName);
accessory.setFileSize(fileSize);
accessory.setPath(path);
accessory.setCategory(category);
return accessory;
}
private String genTmpFileName() {
return DateUtil.date_string(new Date(), "yyyyMMddHHmmssssss");
}
其实比较复杂的是页面上的操作，每一个做过上传的相信也都有体会，但是这个layui已经帮我们简化了很多，基于上传是一个公用方法，此处我又做了一次抽取，代码如下
var upload = function (eleId, layUpload, done,extendParam, error, accept, exts) {
layUpload.render({
elem: eleId //绑定元素
, url: uploadPath //上传接口--此处通过配置的全局变量获取
, accept: accept === undefined ? 'file' : accept
, exts: exts === undefined ? 'jpg|png|gif|bmp|jpeg' : exts
, data: extendParam
, done: function (res) {
//上传完毕回调
if (typeof (done) === 'function') {
console.log(res);
if (res.code === '0'){
done(res.data);
}
}
}
, error: function () {
//请求异常回调
if (typeof (error) === 'function') {
error()
}
}
});
};
参数解释：
eleId：绑定上传事件元素id
layUpload：layui的upload模块，也可以在此处使用layui.use再次获取
done：上传成功回调
默认传这三个方法就够了，如果不需要处理失败等情况的话（但是不建议这么干）
extendParam：自定义扩展参数
error：失败回调
accept：接收类型（layui默认：file）
exts：文件扩展名（layui默认：jpg|png|gif|bmp|jpeg）
3.前端页面
三、效果
头像上传
四、预览
预览更简单，只需要获取图片路径，配合nginx即可。
nginx配置
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /file {
alias D:\easyboot;
allow all;
autoindex on;
}
}
java代码部分：
@RequestMapping("open")
public void upload(@RequestParam("id") String id, HttpServletResponse response) {
response.setHeader("Access-Control-Allow-Origin", "*");
SysAccessory accessory = sysAccessoryService.getById(id).getData();
if (accessory == null){
return;
}
String path = viewBasePath + accessory.getPath();
try {
response.sendRedirect(path);
} catch (IOException e) {
e.printStackTrace();
}
}
访问路径：
访问url
目标结果：
目标结果
这只是简单的图片上传和预览，具体文件类型怎么控制，真实文件类型怎么获取，批量上传等等都没有，只是给小伙伴们一个简单的demo可以参考，有问题的欢迎随时撩我，或者关注我的公众号获取更多信息。