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});
                  }
              }
       });
});

<div class="layui-form-item">
            <label class="layui-form-label">{$value.title}:</label>
            <div class="layui-input-inline">
              <input name="商户logo" lay-verify="required" id="LAY_avatarSrc" placeholder="图片地址" value="{$value.value}" class="layui-input">
            </div>
            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                   <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
                       <i class="layui-icon">&#xe67c;</i>上传图片
                   </button>
            </div>
</div>