lavarvel  头像上传 之后展示在页面上 异步上传 图片

引用富文本编辑器

 

这里用到的插件 UEditor官方文档    http://fex.baidu.com/ueditor/#start-start 

插件 Uploader官方文档  http://fex.baidu.com/webuploader/getting-started.html#%E5%BC%95%E5%85%A5%E8%B5%84%E6%BA%90

<form  action="{{ route('article.store') }}" method="post" class="form form-horizontal">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章封面：</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <!--用来存放item-->
                    <input type="hidden" name="pic" id="pic" value="{{config('up.pic')}}">
                    <div id="picker">选择图片</div>
                </div>
                <div class="formControls col-xs-4 col-sm-3">
                    <img src="" id="img" style=" width:100px ">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="body" id="body" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加文章">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('js')
    <!--引入JS-->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
    <!--SWF在初始化的时候指定，在后面将展示--- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->




    <script>
        //富文本编辑器
      var ue = UE.getEditor('body', {
        initialFrameHeight: 200
      });

      // 初始化Web Uploader 文件上传
      var uploader = WebUploader.create({

          // 选完文件后，是否自动上传。
          auto: true,

          // swf文件路径
          swf: '/webuploader/Uploader.swf',

          // 文件接收服务端。
          server: '{{route('admin.article.upfile')}}',
          formData :{
              _token: '{{csrf_token()}}'
          },
          fileVal : 'file',


          // 选择文件的按钮。可选。
          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
          pick: {
              id:'#picker',
             multiple: false
          },

          //  只允许选择图片文件。
           accept: {
              title: 'Images',
              extensions: 'gif,jpg,jpeg,bmp,png',
               mimeTypes: 'image/*'
          },

          resize:true
      });
      // 文件上传成功，给item添加成功class, 用样式标记上传成功。
      uploader.on( 'uploadSuccess', function( file,ret ) {
          let src = ret.url;
          //给表单添加value值
          $( '#pic').val(src);
          //给图片值
          $( '#img').attr('src',src);
      });

    </script>
@endsection

控制器代码 先创建处理文件方法 返回视图

public function upfile(Request $request){
        $pic = config('up.pic');
        if ($request->hasFile('file')){
            $ret = $request->file('file')->store('','article');
            $pic = '/uploads/article/'.$ret;
        }
        return ['status'=>0, 'url'=>$pic];
    }

　　下一个控制器方法处理上传全部数据放入数据库

  public function store(Request $request)
    {
        $post = $request->except(['_token','file']);
        Article::create($post);
       return redirect(route('article.index'));

    }