使用java的MultipartFile实现layui官网文件上传实现全部示例，java文件上传

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

layui文件上传示例地址：https://www.layui.com/demo/upload.html

本次教程是基于springboot2.0的。

测试中把layui官网的文件上传都实现了一遍。

然后还在自行写了一个登录注册，使用了上传图像。因为只是测试，所以写的不规范，谅解。。。

发一些项目截图，觉得对自己有用的朋友可以自行下载看看。

这个测试项目我发布在了GitHub上。可以自行下载。如果有什么问题的地方请大佬一定要留言告诉小弟我，感激不尽！

地址：https://github.com/hunmeng/jpa01

不下载继续看文章也是可以的。往下滑

.. .. ..

废话少说，进入主题。

在pom文件导入commons-fileupload 1.3.3依赖或者jar包

        <!--上传文件依赖--><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.3</version></dependency>

jar包下载地址 https://repo1.maven.org/maven2/commons-fileupload/commons-fileupload/1.3.3/commons-fileupload-1.3.3.jar

1.导入完毕之后配置bean

@Configuration
public class SpringBean {//设置文件上传的配置@Bean(name = "multipartResolver")public CommonsMultipartResolver multipartResolver(){CommonsMultipartResolver resolver = new CommonsMultipartResolver();resolver.setDefaultEncoding("UTF-8");resolver.setMaxUploadSize(52428800);//设置上传文件的最大值resolver.setResolveLazily(true);return resolver;}
}

2.在yml配置文件

file:staticAccessPath: /upload/**uploadFolder: G://upload/

3.然后配置文件夹映射，不然无法在项目中获取电脑上的文件

不过这个好像和文件上传没有关系，哈哈哈。想配置的就配置一下吧，反正之后获取图片时也会配置的。

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {@Value("${file.staticAccessPath}")private String staticAccessPath;@Value("${file.uploadFolder}")private String uploadFolder;@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");}

}

4.之后创建一个实体类，当然你也可以不创建，直接把MultipartFile写在方法参数中，但是一定要做注意参数命名一定要是file，一定要是file，一定要是file。重要的事情说三遍。

实体类中MultipartFile属性名也必须叫file。写实体类的好处是可以方便携带其他的参数，比如和图片绑定的用户id等等

//实体类
public class FileVo implements Serializable {private

file;public FileVo(MultipartFile multipartFile) {this.file = multipartFile;}public FileVo(){}public MultipartFile getFile() {return file;}public void setFile(MultipartFile file) {this.file = file;}
}

5.然后在Controller层加入以下方法。因为只是测试所以就写到了controller层，当然你也可以把文件上传方法放到util类，或者service层

@RestController
@RequestMapping("/upload")
public class UploadController {
@Value("${file.uploadFolder}")private String uploadFolder;/*** UUID随机的命名* 普通上传，多图片上传* @param fileVo* @return*/@RequestMapping("/randomUplad")public Map randomUplad(FileVo fileVo){System.out.println("fileVo:"+fileVo.getFile());String fileUrl = fileUpload(fileVo,true);return this.file(fileUrl);}/*** 上传文件的全名称命名* 指定允许上传的文件类型，允许上传的文件后缀，视频* @param fileVo* @return*/@RequestMapping("/nameUplad")public Map nameUplad(FileVo fileVo){System.out.println("fileVo:"+fileVo.getFile());String fileUrl = fileUpload(fileVo,false);return this.file(fileUrl);}/*** 文件上传，随机UUID* @param fileVo 上传的实体* @param b 判断是用随机的uuid还是文件的名称,默认为UUID* @return 上传的URL地址*/public String fileUpload(FileVo fileVo,boolean b) {if (fileVo.getFile()==null) {return null;}//随机一个idString name = fileVo.getFile().getOriginalFilename();if (b) {   //判断是否用什么命名，true为UUID，false为上传文件的全名称//获取文件的后缀String[] split = name.split("\\.");     //  匹配小数点（.）必须转义，否则split方法无效name = UUID.randomUUID().toString().replaceAll("-", "")+"."+split[split.length-1];}String fileUrl = this.uploadFolder+"/"+name;System.out.println("fileUrl:"+fileUrl);File file = new File(fileUrl);try {fileVo.getFile().transferTo(file);} catch (IOException e) {fileUrl = null;}return fileUrl;}@RequestMapping("/fileUploads")public Map fileUploads(MultipartFile file[]){return this.file(null);}/*** 返回是否上传成功的参数* @param url* @return*/public Map file(String url){Map map = new HashMap();if (url==null||url=="") {map.put("msg","上传失败");map.put("code",500);return map;}map.put("msg","上传成功");map.put("code",200);map.put("url",url);return map;}}

6.最后就是前端的的代码了，注意导入layui的js和css！

这里的代码基本上都是https://www.layui.com/demo/upload.html里的，只修改了提交的地址罢了。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layui文件上传</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body><blockquote class="layui-elem-quote">使用fileupload文件上传依赖包<p>commons-fileupload 1.3.3</p><p>MultipartFile对象的命名一定要叫 <font color="red" >file</font></p>
</blockquote><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>常规使用：普通图片上传</legend>
</fieldset><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1"><p id="demoText"></p></div>
</div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>上传多张图片</legend>
</fieldset><div class="layui-upload"><button type="button" class="layui-btn" id="test2">多图片上传</button><blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">预览图：<div class="layui-upload-list" id="demo2"></div></blockquote>
</div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>指定允许上传的文件类型</legend>
</fieldset><button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只允许压缩文件</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频</button>
<button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上传音频</button>
<div style="margin-top: 10px;"><!-- 示例-970 --><ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>设定文件大小限制</legend>
</fieldset><button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
<div class="layui-inline layui-word-aux">这里以限制 60KB 为例
</div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>同时绑定多个元素，并将属性设定在元素上</legend>
</fieldset><button class="layui-btn demoMore" lay-data="{url: '/upload/nameUplad'}">上传A</button>
<button class="layui-btn demoMore" lay-data="{url: '/upload/nameUplad', size:5}">上传B</button>
<button class="layui-btn demoMore" lay-data="{url: '/upload/nameUplad', accept: 'file',size:10}">上传C</button><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>选完文件后不自动上传</legend>
</fieldset><div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button><button type="button" class="layui-btn" id="test9">开始上传</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>拖拽上传</legend>
</fieldset><div class="layui-upload-drag" id="test10"><i class="layui-icon"></i><p>点击上传，或将文件拖拽到此处</p>
</div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>高级应用：制作一个多文件列表</legend>
</fieldset><div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button><div class="layui-upload-list"><table class="layui-table"><thead><tr><th>文件名</th><th>大小</th><th>状态</th><th>操作</th></tr></thead><tbody id="demoList"></tbody></table></div><button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>绑定原始文件域</legend>
</fieldset><input type="file" name="file" id="test20"><script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#test1',url: '/upload/randomUplad',before: function(obj){//预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接（base64）
                    $('#demo1').attr('height', "100px");$('#demo1').attr('width', "100px");});},done: function(res){//如果上传失败
                layer.msg(res.code+"---"+res.msg+"---"+res.url);//上传成功
            },error: function(){//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function(){uploadInst.upload();});}});//多图片上传
        upload.render({elem: '#test2',url: '/upload/randomUplad',multiple: true,before: function(obj){//预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){$('#demo2').append('<img width="100px;" height="100px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')});},done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);//上传完毕
            }});//指定允许上传的文件类型
        upload.render({elem: '#test3',url: '/upload/nameUplad',accept: 'file' //普通文件
            ,done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});upload.render({ //允许上传的文件后缀
            elem: '#test4',url: '/upload/nameUplad',accept: 'file' //普通文件
            ,exts: 'zip|rar|7z' //只允许上传压缩文件
            ,done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});upload.render({elem: '#test5',url: '/upload/nameUplad',accept: 'video' //视频
            ,done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});upload.render({elem: '#test6',url: '/upload/nameUplad',accept: 'audio' //音频
            ,done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});//设定文件大小限制
        upload.render({elem: '#test7',url: '/upload/nameUplad',size: 60 //限制文件大小，单位 KB
            ,done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});//同时绑定多个元素，并将属性设定在元素上
        upload.render({elem: '.demoMore',before: function(){layer.tips('接口地址：'+ this.url, this.item, {tips: 1});},done: function(res, index, upload){var item = this.item;layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增
            }})//选完文件后不自动上传
        upload.render({elem: '#test8',url: '/upload/nameUplad',auto: false//,multiple: true
            ,bindAction: '#test9',done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});//拖拽上传
        upload.render({elem: '#test10',url: '/upload/nameUplad',done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});//多文件列表示例var demoListView = $('#demoList'),uploadListIns = upload.render({elem: '#testList',url: '/upload/randomUplad',accept: 'file',multiple: true,auto: false,bindAction: '#testListAction',choose: function(obj){var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件
                obj.preview(function(index, file, result){var tr = $(['<tr id="upload-'+ index +'">','<td>'+ file.name +'</td>','<td>'+ (file.size/1014).toFixed(1) +'kb</td>','<td>等待上传</td>'
                        ,'<td>','<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传
                    tr.find('.demo-reload').on('click', function(){obj.upload(index, file);});//删除
                    tr.find('.demo-delete').on('click', function(){delete files[index]; //删除对应的文件
                        tr.remove();uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });demoListView.append(tr);});},done: function(res, index, upload){if(res.code == 200){ //上传成功var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');tds.eq(3).html(''); //清空操作return delete this.files[index]; //删除文件队列已经上传成功的文件
                }this.error(index, upload);},error: function(index, upload){var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }});//绑定原始文件域
        upload.render({elem: '#test20',url: '/upload/randomUplad',done: function(res){layer.msg(res.code+"---"+res.msg+"---"+res.url);console.log(res)}});});
</script></body>
</html>

最最后总结一下在编码时出现的几个问题。

1.就是MultipartFile必须命名为file

2.在获取上传文件的后缀名时，用split()方法匹配小数点（.）必须进行转义。

 String[] split = name.split("\\.");String fileSuffix =  split[split.length-1];

转载于:https://www.cnblogs.com/hunmeng/p/11181578.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

小甲鱼python第二讲课后习题
0.什么是BIF BIF为内置函数，英语全称为Build-in-Function Python3用input()取代了Python2的raw_input(),接收用户输入1.用课堂上小甲鱼教的方法数一数Python3提供了多少BIF？在IDLE中，输入dir(__builtins__) 前后是2个下划线查看详细的BIF功能，在shell--IDLE中输入help(in…...
2024/5/8 21:42:03
YSlow 规则中13 条解释(转)
YSlow 规则中一共有13条，其中比较重要的有11条，先简单说说各自的大概解释：1、Make fewer HTTP requests--更少的http请求，也就是说页面中尽量少的引用外部静态资源，js、css以及图片 2、Use a CDN--使用CDN网络，将页面中的静态资源分布到离用户最近的网络节点上 3、Add an…...
2024/5/8 16:24:46
华为的一道括号匹配题目
括号匹配判断问题描述：检查字符串表达式中的括号是否匹配；左括号数目同有括号数目不相等即为不匹配；去除多余的左括号或者右括号，优先保留先出现的括号；匹配后去除无效的括号：如：((表达式)) 应为(表达式)；只考虑小括号，不考虑先出现右括号的情况；要求实现函数…...
2024/5/8 23:15:12
软考中级网络工程师知识点笔记
前言笔者将自己在学习网络工程师的过程中做的笔记分享出来，如果有不足之处希望读者不吝指教，部分图片和习题来源网络，如涉及版权问题请联系删除。 2019/7：笔者已通过网工考试，最后的几章笔记因为时间仓促没来得及整理，就不更新了学习建议必备参考书目是《网络工程师（…...
2024/5/8 20:22:14
windows 下编译 davinci的 gnu工具：flash_utils.tar.gz（转载）
TI已经把软件开源化了，前两年搞DSP的时候就知道买算法的路子在中国是搞不通的~~~davinci的开源软件网址是：arago-project.org。里面提供了各种源码下载，其中有一个叫flash_utils.tar.gz，用来擦除和烧写ubl的。但是里面的readme.txt说的超级简单，开源的那帮家伙真是不敢恭维…...
2024/5/8 20:36:07
Layui框架简介
layui简介layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui …...
2024/4/13 1:13:39
NYOJ_2 (括号匹配)
题目信息：有一行括号序列，请你检查这行括号是否配对。数据保证S中只含有‘[’,‘]’,‘(’,‘)’四种字符。如果该字符串中所含的括号是配对的，则输出Yes,如果不配对则输出No。题目链接——南洋理工_2(括号匹配)题目分析： /*********************************************…...
2024/5/8 11:30:52
Firebug及YSlow简介与使用图文详解
转载自:http://www.huluboke.com/firebug-yslow/Firebug本是Firefox浏览器下一个出色的网页设计插件，随着浏览器的发展，Firebug也推出了支持IE、Opera、Chrome的Firebug Lite。凭借Firebug的出色代码调试功能，firefox成为了网页设计人员的必备浏览器，为了与其抗争Chrome、I…...
2024/4/19 9:39:27
小甲鱼零基础入门学习Python-012
--------------Class notes------------------1.当列表包含多个元素的时候，默认是从第一个元素开始比较，只要第一个PK赢了，就算整个列表赢了。2.字符串比较的是第一个字符对应的ASCII码值的大小。3.sort 的默认值是sort(reverse = False)，表示不颠倒排序。--------------ho…...
2024/5/8 22:02:30
关于layui重载后台无法获取到值
说起这个layui就是一个坑，在网上搜索很多这方面的资料然后还是没有解决！最后直接复制官网的没想到竟然后台可以取值了，后台我是用控制器获取值然后再传到前台的后台数据为josn是官方的格式废话不多说，直接上代码 @{ Layout = null; }口袋资料 <link href="~/Conte…...
2024/5/9 2:44:58
2. 栈的两个应用：括号匹配和表达式的计算。
字符串括号匹配简单的四则运算...
2024/5/8 11:33:27
在Yslow 34 Rules之后 -- 网站性能优化思路和进展
[size=small] WPO(Web Performance Optimization , 网站性能优化)近年来发展迅猛,期间YAHOO做出了重要贡献,YSlow的14条军规,20条最佳实践影响深远.去年Steve出版了第二本书,Velocity大会也从2008开到了2010.各个网站越来越重视速度,也有越来越多开发者投入到WPO大业当中…...
2024/5/9 2:36:58
TI Davinci GPIO的分析
...
2024/4/12 5:23:08
【小甲鱼】【python3.7】笔记（五）常用操作符
算术运算符：eg：a = 10，b = 8/ 除：a除以b a/b输出结果为1.25// 取整除：返回商的整数部分（向下取整） ** 幂：返回a的b次幂 a**b为10的8次方，输出结果为100000000运算符优先级eg： -3 * 2 + 5 / -2 - 4即((-3) * 2) + (5 / (-2)) …...
2024/4/5 0:12:10
layui数据表格使用方法
个人觉得layui数据表格除了渲染方法简单以外还有一大优点，就是自带分页功能，只要将page属性设置为true即可开启分页功能。这一优点给前后端人员都带来了极大的方便。 table.render({ id:id, elem: #collectsList,//表格挂载绑定的元素id url: "collects/getCollects…...
2024/4/22 22:37:21
网络工程师考试试题讲解视频教程
对2005年5月至2009年5月的网络工程师考试的试题进行了详细的讲解，包括计算机与网络综合知识、网络系统设计与管理，对考试所涉及的知识点进行了深入分析。http://www.csairk.com/user/xch/from.asp?id=70&wh=csai_sgx...
2024/4/19 20:40:13
达芬奇调色软件：DaVinci Resolve Studio 16 Mac
DaVinci Resolve Studio 16 Mac是目前最新版本的达芬奇调色软件，DaVinci Resolve 16功能非常强大，比如：快速查看bin中的所有剪辑，无需搜索bin，编辑模式可以智能地为您剪辑和编辑，内置工具，用于画中画效果，重新定时，稳定，动态缩放，文本，音频等，需要的朋友，欢迎来m…...
2024/4/11 18:18:41
小甲鱼零基础学习python_28 【python中魔法方法三：属性访问】
今天介绍以下四个访问属性的魔法方法：__getattribute__(self, item): __getattr__(self, item):__setattr__(self, key, value):__delattr__(self, item):先定义一个类用来做实验：class C:def __getattribute__(self, item): print(getattribute)return super().__getattrib…...
2024/4/11 18:18:40
HCNA华为认证网络工程师视频教程
下载地址：http://www.jztuan.net/product/view11016.html 第 1 章：来一场说走就走的我赢之旅 IT职业生涯规划第 2 章： OSPF路由协议 OSPF路由协议基础划分AS为多区域 OSPF基本配置 OSPF邻居与邻接关系端口状态变换-广播型和NBMA 配置点到多点网络协议报文和链路状态通告…...
2024/4/11 18:18:39
网页优化插件 YSlow
YSlow是yahoo美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。 YSlow跌评分规则。主要有12条： 1. Make fewer HTTP requests 尽可能少的http请求。。我们有141个请求（其中15个JS请求，3个CSS请求，47个…...
2024/4/12 18:39:54

使用java的MultipartFile实现layui官网文件上传实现全部示例，java文件上传

相关文章

最新文章