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

    }