springboot+layui文件上传组件实现文件上传和删除

前言：

项目中时常会遇到文件上传功能，针对这一功能做一个笔记，以便于自己回顾，写的不好请谅解！！！！

*注：此处只有上传和删除功能，如果要在上传后在线预览PDF请参考另一篇博客：

前端代码：

上传插件用的是layui的文件上传插件。

html:

<form class="layui-form" method="post"  action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" id="username" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上传(pdf)</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="up">
                                <i class="layui-icon">&#xe67c;</i>上传文件
                            </button>
                            <input type="text" id="filename" name="filename" required  lay-verify="required" readonly="readonly" value="">
                            <button type="button" class="layui-btn" id="delfile" onclick="delFile();">删除</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

js:

<script>
    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#up' //绑定元素
            ,url: '/uploadFile.json' //上传接口
            ,accept: 'file' //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            ,exts: 'pdf' //指定后缀名 更多参数请到这里https://www.layui.com/doc/modules/upload.html
            ,done: function(res){
               if (res.status==0){
                   alert(res.message);
               }
               //上传后的文件名回显到input框
               document.getElementById("filename").value=res.data;
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    delFile = function (){
        var filename = $("#filename").val();
        if (filename=="") {
            alert("还未上传文件！")
        }  else{
            if(confirm("确实要删除吗？")){
                $.ajax({
                    type:"POST",
                    url:"/delFile.json",
                    data:{filename:$("#filename").val()},
                    dataType:"json",
                    success:function (res) {
                        if (res.status==0) {
                            alert(res.message);
                            $("#filename").val("");
                        }else{
                            alert(res.message)
                        }
                    }
                });
            }
        }
    }

</script>

后端代码：

Java:

@RequestMapping("/uploadFile.json")
    @ResponseBody
    public Result uploadFile(@RequestParam("file") MultipartFile file){
        if (file.isEmpty()){
            return Result.fail("文件为空!");
        }
        //获取文件名
        String originalFilename = file.getOriginalFilename();
        //新文件名  时间戳+文件名
        String filename = System.currentTimeMillis()+"_"+originalFilename;
        //获取路径
        String path = getPath();
        //创建新的文件
        File fileMkdir = new File(path+"\\"+filename);
        if (!fileMkdir.exists()){
            fileMkdir.mkdir();
        }
        try {
            //写入文件
            file.transferTo(fileMkdir);
            Map<String,String> data = new HashMap<>();
            return Result.success("上传成功！",filename);
        } catch (IOException e) {
            e.printStackTrace();
            return Result.fail("上传失败！");
        }
    }

    /**
     * 删除文件
     */
    @RequestMapping("/delFile.json")
    @ResponseBody
    public Result delFile(@RequestParam("filename") String filename){
        Result result = deleteFileByName(filename);
        return result;
    }


    private Result deleteFileByName(String filename) {
        String path = getPath();
        File file = new File(path);
        if (!file.exists()){
            return Result.fail("该文件不存在!");
        }
        if (file.isFile()){
            return Result.fail("该文件是目录!");
        }else {
            File[] files = file.listFiles();
            for (File f: files) {
                if (filename.equals(f.getName())){
                    f.delete();
                    return Result.success("删除成功!",null);
                }
            }
        }
        return Result.fail("该文件不存在!");
    }

    /**
     * 获取存储路径
     */
    private String getPath(){
        //获取当前项目路径
        String c = System.getProperty("user.dir");
        //设置文件存储路径
        return c+"\\src\\main\\resources\\file"+"\\";
    }

演示效果：

添加后结果：