首页 > 开发 > Java > 正文

SpringBoot+layui实现文件上传功能

2024-07-14 08:42:15
字体:
来源:转载
供稿:网友

什么是spring boot

Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适)。

页面代码(只需要引入基础layui的css与js)

<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>

JS

layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //多文件列表示例 var demoListView = $('#demoList') ,uploadListIns = upload.render({  elem: '#testList'  ,url: 'upload/uploadFile'  ,accept: 'file'  ,multiple: true  ,auto: false  ,size: 5120  ,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-mini demo-reload layui-hide">重传</button>'      ,'<button class="layui-btn layui-btn-mini 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 == 0){ //上传成功    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'); //显示重传  } });});

后台接收

 public final static String UPLOAD_FILE_PATH = "D://uploadFile//";  @RequestMapping(value = "uploadFile")  public String uploadImage(@RequestParam("file") MultipartFile file) {    if (!file.isEmpty()) {      Map<String, String> resObj = new HashMap<>(MAP_SIZE);      try {        BufferedOutputStream out = new BufferedOutputStream(            new FileOutputStream(new File(UPLOAD_FILE_PATH, file.getOriginalFilename())));        out.write(file.getBytes());        out.flush();        out.close();      } catch (IOException e) {        resObj.put("msg", "error");        resObj.put("code", "1");        return JSONObject.toJSONString(resObj);      }      resObj.put("msg", "ok");      resObj.put("code", "0");      return JSONObject.toJSONString(resObj);    } else {      return null;    }  }

总结

以上所述是小编给大家介绍的SpringBoot+layui实现文件上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持!


注:相关教程知识阅读请移步到JAVA教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表