thinkphp5 + layui单张图片和多张图片上传（关于tp5多图上传只返回一个值已经解决）

思路，异步传输图片并预览，将异步上传后的值返回表单隐藏域再提交。

<!-- 单图上传 -->
<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>&nbsp;<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>&nbsp;<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('正在上传……');
            //预读本地文件示例，不支持ie8
            obj.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,  //允许大小，最大2M
        auto: true, // 自动上传
        before: function(obj){
            $("#ups").text('正在上传……');
            $('#upload-img').html('');
            //预读本地文件示例，不支持ie8
            obj.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 即为 file
	    if(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]);
	    }
    }
}