layui实现图片文件上传

其实代码是很简单的，但是有个地方需要注意一下(文末会贴出全部代码)

 

1，服务端tp5代码：这里的文件name要填file，且只能填file。填别的值均无法获取到客户端传来的文件。

 

2，layui前端代码:

 

layui

 

 所有代码:

    public function upload(Request $request)
    {
        $file=$request->file('file');
        if ($file){
            $info = $file->move('./uploads');

            if($info){
                // 成功上传后 获取上传信息
                // 输出 jpg
                return json([
                        'url'=>$info->getSaveName(), //返回图片文件路径给前端
                        'msg'=>'上传成功',
                        'code'=>201
                ]);
            }else{
                // 上传失败获取错误信息
                return json([
                    'msg' => $file->getError(),
                    'code'=> 204
                ]);
            }
        }
    }

 

 

layui.use(['form','upload'], function(){
       var $ = layui.$
            ,layer = layui.layer
            ,upload=layui.upload
            ,form = layui.form;

       //上传网站logo
       var avatarSrc = $('#LAY_avatarSrc');
       upload.render({
              url: "{:url('System/upload')}"
              ,elem: '#LAY_avatarUpload'
              ,done: function(res){
                  console.log(res.filename);
                  if(res.code == 201){
                      avatarSrc.val(res.url);
                  } else {
                      layer.msg(res.msg, {icon: 5});
                  }
              }
       });
});

            {$value.title}:
            

              
            
            

                   
                       上传图片