思路，异步传输图片并预览，将异步上传后的值返回表单隐藏域再提交。
<!-- 单图上传 -->
<div class="layui-form-item"><label class="layui-form-label"><span class="x-red">*</span>图片上传</label><div class="layui-input-block"><!-- 获取上传后的图片名称，便于等会儿提交数据 --><input type="hidden" name="banner_path" id="banner_path"><div class="layui-upload"><a class="layui-btn" id="btn-img">上传图片</a> <span class="x-red" id="ups"></span><div class="layui-upload-list"><img class="layui-upload-img" id="upload-img" style="width:800px;height:200px;"></div></div> </div>
</div> <!-- 多图上传 -->
<div class="layui-form-item"><label class="layui-form-label"><span class="x-red">*</span>图片上传</label><div class="layui-input-block"><input type="text" name="article_img" id="article_img" class="layui-input"><div class="layui-upload"><a class="layui-btn" id="btn-img">上传图片</a> <span class="x-red" id="ups"></span><blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">预览图：<div class="layui-upload-list" id="upload-img"></div></blockquote> </div> </div>
</div> layui.use(['layer','form','upload'], function(){var layer = layui.layer ,form = layui.form,upload = layui.upload;//普通图片上传upload.render({elem: '#btn-img',url: "{:url('Image/addBanner')}",data: {isAjax:'1',html:'yes'}, //额外参数accept: 'images', // 允许上传的文件类型size: 2048, //允许大小，最大2M auto: true, // 自动上传,自动调用后台方法开始上传before: function(obj){$("#ups").text('正在上传……');//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#upload-img').attr('src', result); //图片链接（base64）});},done: function(res){ if(res.status == 1){$("#ups").text('上传成功！'); //上传状态//layer.msg('图片上传成功！',{icon:6});$("#banner_path").val(res.info); //获取返回值，便于等会儿提交整个表单 }else{layer.msg(res.info,{icon:5});return false; } },error: function(){layer.msg('上传失败，请重新上传',{icon:5});}});//多图上传var num = 0; //便于接收返回值var img = []; //便于存储返回值upload.render({elem: '#btn-img',url: "{:url('Image/addBanner')}",data: {isAjax:'1',html:'yes'}, //额外参数multiple: true, //开启多图上传这个是重点accept: 'images', // 允许上传的文件类型size: 2048, //允许大小，最大2Mauto: true, // 自动上传before: function(obj){$("#ups").text('正在上传……');$('#upload-img').html('');//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){ $('#upload-img').append('<img src="'+result+'" alt="'+ file.name +'" class="layui-upload-img" style="width:100px;height:auto">'); //图片链接（base64）});},done: function(res){num = num + 1; //每次进入等于遍历一次 if(res.status == 1){ //在控制台打印返回数据，这里可以看见每张图片的值都是返回回来了的，所以需要将所有值用上面的竖线拼接起来，便于表单传值到后台 console.log(res.info);img[num-1] = res.info; //将返回的每一个值都存储起来 $("#ups").text('上传成功！'); $("#article_img").val(img.join('|')); //使用竖线链接，这个是关键 }else{$("#ups").text(res.info);layer.msg(res.info,{icon:5});return false; } },error: function(){$("#ups").text('上传失败，请重新上传！');layer.msg('上传失败，请重新上传！',{icon:5}); }});
});单图上传
多图上传
//这里只截取了主要代码片段，此方法中我还定义了表单提交后的方法，所以前端使用了额外的参数进行区分，单图与多图均用此方法，只是多图上传的时候，避免出现同名的文件，需要重新定义一下文件名
public function addBnaner(){if(input('isAjax') == 1){ //异步上传图片// 获取表单上传文件$file = request()->file('file'); //layui默认的文件name 即为 fileif(empty($file)){return json(['info'=>'请选择上传文件！','status'=>0]);}// 移动到框架应用根目录/public/upload/ 目录下，并修改文件名为时间戳$info = $file->move(ROOT_PATH.'public'.DS.'upload'.DS.'image'.DS,time());//下面两行即为多图上传的文件名重定义//$filename = time().rand(10,100); //时间戳+随机数//$info = $file->move(ROOT_PATH.'public'.DS.'upload'.DS.'article'.DS,$filename);if($info){ return json(['info'=>$info->getSaveName(),'status'=>1]); //文件名称}else{return json(['info'=>'文件上传失败啦！','status'=>0]);}}
}