themyleaf 图片上传_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=InnoDBDEFAULT CHARSET=utf8 COMMENT='附件表';

2.文件上传的主要代码 上传的返回值是附件id，因为上传后其他操作需要(比如保存用户头像)需要用到

@RequestMapping("upload")

publicResultModelupload(@RequestParam("file")MultipartFilefile,StringuserId,@RequestParam("category")Stringcategory){

StringoriginalName=file.getOriginalFilename();

longfileSize=file.getSize();

Stringext=originalName.substring(originalName.lastIndexOf(".")+1,originalName.length());

StringtmpName=genTmpFileName();

Stringpath=File.separator+category+File.separator+tmpName+"."+ext;

try{

FiletargetFile=newFile(uploadBasePath+path);

if(!targetFile.getParentFile().exists()){

targetFile.getParentFile().mkdirs();

}

file.transferTo(targetFile);

SysAccessoryaccessory=getAcc(userId,originalName,Integer.parseInt(String.valueOf(fileSize)),path,category);

returnsysAccessoryService.upload(accessory);

}catch(IOExceptione){

e.printStackTrace();

}

returnResultModel.defaultError(null);

}

privateSysAccessorygetAcc(StringuserId,StringoriginalName,IntegerfileSize,Stringpath,Stringcategory){

SysAccessoryaccessory=newSysAccessory();

accessory.setCreateTime(newDate());

accessory.setCreateUser(userId);

accessory.setIsDel(Constants.NEGATIVE);

accessory.setOriginalName(originalName);

accessory.setFileSize(fileSize);

accessory.setPath(path);

accessory.setCategory(category);

returnaccessory;

}

privateStringgenTmpFileName(){

returnDateUtil.date_string(newDate(),"yyyyMMddHHmmssssss");

}

其实比较复杂的是页面上的操作，每一个做过上传的相信也都有体会，但是这个layui已经帮我们简化了很多，基于上传是一个公用方法，此处我又做了一次抽取，代码如下

varupload=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.前端页面

上传图片