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>

 

posted @ 2021-05-02 19:13  MoooJL  阅读(415)  评论(0编辑  收藏  举报