TP6框架中如何无刷新上传文件

我这个图片上传使用的  layui自带的文件上传插件

上传前效果图：

上传后效果图：

 效果还是蛮漂亮的对吧。。

直接上代码不啰嗦：

HTML代码：

  <div class="layui-form-item">
                      <label class="layui-form-label">
                        文章封面
                    </label>
                    <button type="button" class="layui-btn" id="news_img_button" >上传图片</button>
                    <input type="hidden" value="" id="news_pic" name="news_pic" required="" lay-verify="news_img" autocomplete="off" class="layui-input">
                    <div class="layui-upload-list">
                        <label class="layui-form-label">
                        </label>
                        <img class="layui-upload-img" id="newsimg" style=" 200px;height: 140px;margin: 0 10px 10px 0;" src="" onerror="this.src='/admin/images/no_img.png'">
                        <p id="newsimg_text"></p>
                    </div>
                  </div>

JS代码

 <script>
            layui.use('upload', function(){
                var $ = layui.jquery
                        ,upload = layui.upload;

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#news_img_button'
                    ,url: '/admin/news/uploadImg'
                    ,before: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result)
                        {
                            $('#newsimg').attr('src', result); //图片链接（base64）
                        });
                    }
                    ,done: function(res){

                        //如果上传失败
                        if(res.status == 'SUCCESS')
                        {
                            $("#news_pic").attr('value',res.filename)
                        }
                        if(res.status== 'FAIL')
                        {   
                            //$("#newsimg_text").html(res.msg);
                            layer.msg(res.msg);
                        }
                        //上传成功
                    }

                });
            });
        </script>

控制器代码：

//控制器代码
   public function uploadImg()
    {
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
        $fiels = request()->file();
        // 上传到本地服务器
         try {
            validate(['image'=>'fileSize:5120|fileExt:jpg,png,gif,jpeg,bmp|fileMime:image/jpeg,image/gif,image/png,image/bmp'])->check($fiels);

            $savename = \think\facade\Filesystem::disk('public')->putFile( 'news', $file);

            return json(array('status'=>'SUCCESS','msg'=>"上传成功",'filename'=>"/uploads/".$savename));

        } catch (\think\exception\ValidateException $e) {

            return json(array('status'=>'FAIL','msg'=>"上传失败".$e->getMessage()));
        }
    }