SpringBoot基于layui实现文件上传
配置
application.yml
spring: servlet: multipart: max-file-size: 20MB max-request-size: 20MB save-image-path: D:\Softwares\Major\IDEA\Projects\Movie_System\src\main\resources\resources\upload
controller.java
@Value("${save-image-path}") public String path; @RequestMapping("uploadImage") @ResponseBody private String uploadImage(@RequestParam("file") MultipartFile file, HttpServletRequest request){ String originalFilename = file.getOriginalFilename(); System.out.println(originalFilename); // String path1 =request.getServletContext().getRealPath("public")+"/" + originalFilename; // String path2 =request.getServletContext().getRealPath(""); try { file.transferTo(new File(path+ File.separator + originalFilename)); } catch (IOException e) { e.printStackTrace(); return "fail"; } return "success"; }
test.html
<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> <div class="layui-hide" id="uploadDemoView"></div> <p>点击上传,或将文件拖拽到此处</p> <img src="" alt="上传成功后渲染" style="max-width: 196px" id="demo1"> <input id="file" type="hidden" > </div> <button class="layui-btn" id="uploadImage">上传</button> <script> layui.use('upload', function() { var $ = layui.jquery , upload = layui.upload //拖拽上传 var file1; upload.render({ elem: '#test10' ,auto: false ,bindAction:"#uploadImage" , choose: function (obj) { //预读本地文件 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); // file = $('#file')[0].files[0]; file1=file; }) } }); $("#uploadImage").click(function (){ var formData = new FormData(); formData.append("file",file1); $.ajax({ type:'post', url: '/uploadImage', data: formData, processData: false, contentType: false, success:function (result) { if (result==="success"){ alert("成功"); } else { alert("失败"); } } }); }) }) </script>