非同步上傳圖片並展示到頁面上 首先引用元件https://fex.baidu.com/webuploader/getting-started.html

其他元件也可以

原理 用元件上傳圖片 -》控制器接收處理 返回給 一個img 和 input框用於提交表單 圖片地址

html頁面

<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="text" 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>

js

 <script>

       // 初始化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>
 

　　路由

Route::post('admin/article/upfile','ArticleController@upfile')->name('admin.article.upfile');

控制器儲存處理路徑返回上述頁面

  //非同步上傳檔案接收
    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];
    }

上傳完成