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

\n' +
                '    

\n' +
                '         

\n'+
                '             照片 \n'+
                '             上传图片 \n'+
                '             

\n'+
                '                  \n'+
                '                 

\n'+
                '                 \n' +
                '             

\n'+
                '         

\n'+
                '        

\n' +
                '            保存\n' +       
                '        

\n' +
                '    

\n' +
                '

'
        });
        $("#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('上传失败 重试');
              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  upload(HttpServletRequest request,
            @RequestParam("file") MultipartFile file
            ) throws IOException {
        Map 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;
        }
    
    }