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


  
  

三、效果

springboot之文件上传、图片预览(thymeleaf+layui)_第1张图片
头像上传

四、预览

预览更简单,只需要获取图片路径,配合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();
        }

    }

访问路径:


img_f94b0968d8b79d0c9b43ec5121c248e0.png
访问url

目标结果:


springboot之文件上传、图片预览(thymeleaf+layui)_第2张图片
目标结果

这只是简单的图片上传和预览,具体文件类型怎么控制,真实文件类型怎么获取,批量上传等等都没有,只是给小伙伴们一个简单的demo可以参考,有问题的欢迎随时撩我,或者关注我的公众号获取更多信息。

你可能感兴趣的:(java,javascript,前端)