springboot之文件上传、图片预览(thymeleaf+layui)-阿里云开发者社区

开发者社区> 小尘哥> 正文

springboot之文件上传、图片预览(thymeleaf+layui)

简介: springboot自带图片服务器,但是一般我们都不会用,文件这一块因为灵活性比较高,可能每个公司的都不一样,因此最好还是自己来搞定。 一、思路 1、上传①.
+关注继续查看

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

<!--这只是上传文件代码,其他表单信息忽略-->
  <button type="button" class="layui-btn" id="test1">
              <i class="layui-icon">&#xe67c;</i>上传图片
 </button>
  <input type="hidden" id="photo" name="photo" value="">
<div id="previewPhoto"> 
    <img src="/images/default-mem.png" th:src="${defaultImageViewPath+user.photo}" alt="" style="width: 80px;height: 80px;">
</div>
<script>
    layui.use('form', function () {
        var form = layui.form, upload = layui.upload,$=layui.jquery;
        form.render();
        Common.uploadFile('#test1', upload, function (data) {
            $("#photo").val(data); //回写附件id,用于提交表单时保存到业务表
            $("#previewPhoto img").attr("src",defaultImageViewPath + data);//图片回显,样式可以自己随便写
        },{category:'photo'});
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            //TODO ajax提交表单
            return false;
        });
    });
</script>

三、效果

img_1f43694072c20ff6e0771c86cb503bf5.png
头像上传

四、预览

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

目标结果:


img_b86f3a95573324efe927b4e16b13b323.png
目标结果

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【问题】vs IIS破除文件上传限制最全版
原文:【问题】vs IIS破除文件上传限制最全版 今天在测试一下上传文件的时候发现iis和配置存在上传文件大小限制(IIS默认大小30M,最大运行为2g:2147483647),百度了一部分资料有些发布到IIS好使,但是在VS调试中不好使。
811 0
56套高质量的圣诞节矢量图片素材【免费下载】(上篇)
  再过几周,圣诞节就要来了!这篇文章给大家带来56套高质量的圣诞节矢量图素材,可以免费下载使用。设计师经常需要去网上搜罗一些矢量图片素材用于设计任务,网上的各种资源琳琅满目,要找到合适的素材可能需要花费大量的时间,这些高质量的矢量图素材既能为设计师节省时间,又能有很不错的效果。
825 0
SocketIo+SpringMvc实现文件的上传下载
SocketIo+SpringMvc实现文件的上传下载 socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: image GIT地址: https://github.
941 0
SpringBoot上传和下载文件(二十七)上
SpringBoot上传和下载文件(二十七)上
10 0
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
652 0
Spring MVC 之文件上传(七)
SpringMVC同样使用了apache的文件上传组件。所以需要引入以下包: apache-commons-fileupload.jar apache-commons-io.jar 在springAnnotation-servlet.
561 0
asp.net 解决文件上传大小的限制
1、新建一个文本文件 set providerObj=GetObject("winmgmts:/root/MicrosoftIISv2") set vdirObj=providerObj.
659 0
+关注
小尘哥
bug创造者
39
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载