laravrl 图片异步上传

异步上传图片并展示到页面上      首先引用组件 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];
    }

　　

上传完成