使⽤java的MultipartFile实现layui官⽹⽂件上传实现全部⽰
例，java⽂件上传
layui（谐⾳：类UI) 是⼀款采⽤⾃⾝模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即⽤。
layui⽂件上传⽰例地址：
本次教程是基于springboot2.0的。
测试中把layui官⽹的⽂件上传都实现了⼀遍。
然后还在⾃⾏写了⼀个登录注册，使⽤了上传图像。因为只是测试，所以写的不规范，谅解。。。
发⼀些项⽬截图，觉得对⾃⼰有⽤的朋友可以⾃⾏下载看看。
这个测试项⽬我发布在了GitHub上。可以⾃⾏下载。如果有什么问题的地⽅请⼤佬⼀定要留⾔告诉⼩弟我，感激不尽！
地址：
不下载继续看⽂章也是可以的。往下滑
.. .. ..
废话少说，进⼊主题。
在pom⽂件导⼊commons-fileupload 1.3.3依赖或者jar包
<!--上传⽂件依赖-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
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;
@Override
public 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:"+File());
String fileUrl = fileUpload(fileVo,true);
return this.file(fileUrl);
}
/
**
* 上传⽂件的全名称命名
* 指定允许上传的⽂件类型，允许上传的⽂件后缀，视频
* @param fileVo
* @return
*/
@RequestMapping("/nameUplad")
public Map nameUplad(FileVo fileVo){
System.out.println("fileVo:"+File());
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 (File()==null) {
return null;
}
/
/随机⼀个id
String name = File().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 {
} 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！
这⾥的代码基本上都是⾥的，只修改了提交的地址罢了。
<!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/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" >
<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" >
<legend>上传多张图⽚</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图⽚上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" >
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
<fieldset class="layui-elem-field layui-field-title" >
<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 >
<!-- ⽰例-970 -->
<ins class="adsbygoogle" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins> </div>
<fieldset class="layui-elem-field layui-field-title" >
<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" >
<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" >
<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" >
<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" >
<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" >
<legend>绑定原始⽂件域</legend>
</fieldset>
<input type="file" name="file" id="test20">
<script src="//res.layui/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//普通图⽚上传
var uploadInst = der({
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.de+"---"+res.msg+"---"+res.url);
//上传成功
}
,error: function(){
//演⽰失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span >上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//多图⽚上传
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">')
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论