layui上传图片及前后端

前两天做了一个layui上传图片的功能在这里给大家分享一下

我做的是一个添加，废话不多说，上酸菜

该上传图片是没有绑定保存按钮，是直接上传的，如果想让图片跟参数一同提交只需要绑定提交按钮就行。

https://www.layui.com/doc/modules/upload.html官网

$("#personnelAdd").click(function () {
        layer.open({
            type: 1,
            title: "添加信息",
            skin: 'layui-layer-rim',
            area: ['600px', '630px'],
            content: '<div style="padding: 20px">\n' +
                '    <form class="layui-form" enctype="text/plain">\n' +
                '         <div class="layui-upload"> \n'+
                '             <label class="layui-form-label">照片</label> \n'+
                '             <button type="button" class="layui-btn" id="test1">上传图片</button> \n'+
                '             <div id="upload-list" class="layui-upload-list"  style="width:100px;height:100px;border:1px solid #0099CC;margin-left: 109px;"> \n'+
                '                 <img class="layui-upload-img" id="demo1" style="width: 100px;height:100px;"> \n'+
                '                 <p id="demoText"></p> \n'+
                '                 <input type="text" id="personnelImage" name="personnelImage" class="layui-input" style="display:none">\n' +
                '             </div> \n'+
                '         </div> \n'+
                '        <div style="text-align: center">\n' +
                '            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="add_personnel">保存</button>\n' +       
                '         </div>\n' +
                '    </form>\n' +
                '</div>'
        });
        $("#upload-list").hide();
        var uploadInst = upload.render({
             elem: '#test1'
            ,exts: 'png|jpg|jpeg'

      //     ,bindAction:'add_personnel' //绑定提交按钮和参数一同提交后台
            ,url: layui.cache.host + '/personnel/upload/'
            ,before: function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
              });
            }
            ,done: function(res){
              //如果上传失败
              if(res.code > 0){
                return layer.msg('上传失败');
              }else{
                //上传成功
                    $("#upload-list").show();//显示图片
                       $("#personnelImage").val(res.fileName);//将名称放到标签中，保存时候用
              }       
            }
            ,error: function(){
              //演示失败状态，并实现重传
              var demoText = $('#demoText');
              demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
              demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
              });
            }
          });
    });
    //添加提交
    layui.form.on('submit(add_personnel)', function (data) {
        common.ajaxPost(layui.cache.host + '/personnel/info/save', data.field, function (res) {
            layer.alert(JSON.stringify(res));
             window.parent.location.reload();
        });
        layer.closeAll();
        return false;//post提交方式，layui默认get参数过多会导致错误
    });
    
})

 

后端：

controller

@PostMapping("upload")
    @ResponseBody
    public Map<String, Object>  upload(HttpServletRequest request,
            @RequestParam("file") MultipartFile file
            ) throws IOException {
        Map<String, Object> res = new HashMap<>();
        //如果文件内容不为空，则写入上传路径
        if (!file.isEmpty()) {
            //上传文件路径
            //上传文件名
            Date d = new Date();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
            String date = sdf.format(d);
            String replaceAll = UUID.randomUUID().toString().replaceAll("-", "");
            String fileName = date+"-"+replaceAll+"-"+file.getOriginalFilename();
            String paths = path;//保存的路径
            File filepath = new File(paths, fileName);
                //判断路径是否存在，没有就创建一个
                if (!filepath.getParentFile().exists()) {
                   filepath.getParentFile().mkdirs();
                }
            
            //将上传文件保存到一个目标文档中
            File file1 = new File(paths + File.separator + fileName);
            file.transferTo(file1);
            //返回的是一个url对象
            res.put("url", file1);
            res.put("fileName", "upload/"+fileName);//保存数据库的路径，方便读取
            return res;
        
        } else {
            res.put("error","上传错误");
            return res;
        }
    
    }