异步文件上传

***引入文件

<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
<!--SWF在初始化的时候指定，在后面将展示-->

前台HTML：

<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">图片上传：</label>
			<div class="formControls col-xs-8 col-sm-9">
                    <input type="hidden" name="pic" id="pic" value="">
                    <div id="picker">选择图片</div>
                    <img src="" id="images"  width="50px"  alt="">
			</div>
		</div>

js部分：

<script>
var uploader = WebUploader.create({
                auto:true,
                // swf文件路径
                swf:  'admin/lib/webuploader/0.1.5/Uploader.swf',
                // 文件接收服务端。
                server: '{{route("admin.article.upload")}}',
                fileVal:"pic",
                formData:{"_token":"{{csrf_token()}}"},
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
            });
            uploader.on( 'uploadSuccess', function( file,res ) {
                $( '#pic').val(res.data);
                $( '#images').attr("src","/"+res.data);
            });
            </script>***

控制器：

 //文件上传
    public function Upload(Request $request)
    {
        $path = $request->file('pic')->store('avatars');
        if ($path){
            return ["code"=>0,"data"=>$path,"msg"=>"上传成功"];
        }else{
            return ["code"=>1,"data"=>"","msg"=>"上传失败"];
        }
    }

路由：

 //上传图片
        Route::post("upload","ArticleController@Upload")->name("article.upload");```