laravel 表单提交 图片的异步上传

这里使用的是WebUploader   百度提供的插件

　　首先下载最新的包

下载第一个，解压，把解压好的文件放入public目录下

 

 

视图层中

<div class="formControls col-xs-4 col-sm-5">
    <input type="hidden" class="input-text" id="pic" name="pic" value="{{config('up.php')}}">
    <div id="picker">封面上传</div>
</div>
<div class="formControls col-xs-4 col-sm-4">
    <img src="" id="img" style="width: 100px">
</div>

 

js代码

var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    // swf文件路径
    swf:'/webuploader/js/Uploader.swf',
    // 文件接收服务端。
    server: '{{route('article.upfile')}}',

    //文件上传携带的参数
    formData:{
          _token : '{{csrf_token()}}',
    },
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    //是否开启多个文件选择
    pick : {
        multiple:false,    //关闭多文件选择
        id:'#picker'   //这里注意原来的是   pick: '#picker',
　　},

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: true
});
uploader.on( 'uploadSuccess', function( file ,ret) {
      let src=ret.url;
      //给隐藏域传值
      $('#pic').val(src)
      //给图片传值
     $('#img').attr('src',src)
});

控制器中

public function upfile(Request $request){
    $pic = config('up.pic');
    if ($request->hasFile('file')){
　　　　　//第一个参数会路径下再指定一个路径，比如要实现一个文件夹最大存储1000个文件
        $info = $request->file('file')->store('bbb','article');
        $pic='/uploads/article/'.$info;
    }
    return ['status'=>0,'url'=>$pic];
}