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"></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); //执行关闭
}
});
});
});
}
});
}