layui图片上传至数据库，修改操作时仍可见作为默认值

layui图片上传至数据库，修改操作时仍可见作为默认值

layui的文件上传采用的是异步上传的原理，具体见layui官方文档layui.com。
但我在练习过程中遇到了一些问题，比如后台怎么接受、前端怎样展示上次关闭session时候的图片等等，发现layui的图片处理还是比较灵活的。代码太多不可能一一复制，但核心都摆在这里了。

@Controller
@RequestMapping("headline/upload")
public class HeadlineUploadController {
    
    
    @RequestMapping("uploadModule")
    @ResponseBody
    public LayuiJson getGridInfo_tree(HttpServletRequest request) {
    
    

        LayuiJson json = new LayuiJson();
        String dirname="Module";
        List<Map<String, String>> lkh_uploadFile = FileUtils.lkh_uploadFile(request, dirname);
        json.setSuccess(true);
        json.setData(lkh_uploadFile);
        return json;
    }
}

@RequestMapping("update")
    @ResponseBody
    public LayuiJson update(Headline dd) {
    
    

        LayuiJson json = new LayuiJson();
        if (headlineService.update(dd)) {
    
    
            json.setSuccess(true);
            json.setMsg("保存成功");
        }
        return json;
    }

<div class="layui-form-item" style="display: flex;">
      <label class="layui-form-label">头条封面</label>
      <button type="button" class="layui-btn" id="data_img">
        <i class="layui-icon">&#xe67c;</i>上传封面
      </button>
      <script type="text/html" template lay-done="layui.data.uploadParams(d.params)">
        <input type="hidden" name="headline_cover" id="headline_cover" value="">
        <div id="icon_data_div" style="margin-left:50px;"></div>
      </script>

    </div>

<script>
$(function(){
    
    
	layui.use(['upload','layer'],function () {
    
    
	    var upload = layui.upload,layer = layui.layer;
	    var form=layui.form;
	       //自定义验证
		form.verify({
    
    
		    number_new: function(value, item){
    
     //value：表单的值、item：表单的DOM对象
		      if(value<0){
    
    
		        return '不能小于0';
		      }
		    }
		});	
		//普通图片上传
      layui.data.uploadParams = function (params) {
    
    
        var headline_cover=params.headline_cover;
        $("#icon_data_div").html("<img height='90px' width='160px' src='"+headline_cover+"'>")
        var uploadInst = upload.render({
    
    
          elem: '#data_img',//绑定的元素
          url: 'headline/upload/uploadModule?access_token='+layui.data('layuiAdmin').access_token,
          //data: {access_token: layui.data('layuiAdmin').access_token},
          auto:true,//是否自动上传
          accept:"images",//指定允许上传的文件类型
          multiple:true,//支持多文件上传
          size: 1024*20,
          done: function(res, index, upload){
    
     //假设code=0代表上传成功
            if(isObjNotEmpty(res.data)){
    
    
              if(res.data.length>0){
    
    
                $("#headline_cover").val(res.data[0].fileurl);
                $("#icon_data_div").html("<img height='90px' width='160px' src='"+res.data[0].fileurl+"'>");
              }
            }
          }

        });
          console.log(1)
        console.log(params.headline_cover);

      };

	});
})
</script>

data_update:function(){
    
    
			var checkStatus = table.checkStatus('lay_data_list');
			var data = checkStatus.data;
			if(data.length==1){
    
    
			}else{
    
    
				layer.msg("请选中一条数据进行修改！");
				return;
			}
			admin.popup({
    
    
				title: '修改组织机构'
				,area: ['550px', '550px']
				,id: 'LAY-data-update'
				,success: function(layero, index){
    
    
					view(this.id).render('headline/headline_update',data[0]).done(function(){
    
    
						form.render(null, 'layuiadmin-data-update-list');
						//监听提交
						form.on('submit(layuiadmin-data-update-submit)', function(data){
    
    
							var field = data.field; //获取提交的字段
							admin.req({
    
    
								url:'headline/update',
								data:field,
								type:'post',
								success:function(data){
    
    
									if(data.success){
    
    
										layer.msg("保存成功！");
										layer.close(index); //执行关闭
										table.reload('lay_data_list');
									}else{
    
    
										layer.msg(data.msg);
									}
								},error:function(){
    
    
									layer.close(index); //执行关闭
								}
							});

						});
					});
				}
			});
		}