Laravel8 WebUploader 异步上传

1.下载 webuploader 包  官方网址： http://fex.baidu.com/webuploader/

2.将压缩包解压后 放入public目录下

3.引入地址，我这个是有美化页面和jQuery的地址

    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
    <script type="text/javascript" src="/webuploader/webuploader.js">
</script><script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 4.写表单页面

    <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-2 col-sm-2">
	        <div id="picker">房屋图片</div>
	    </div>
	    <div class="formControls col-xs-6 col-sm-7">
	        <!-- 表单提交时，上传图片地址，以#隔开 -->
	        <input type="hidden" name="fang_pic" id="fang_pic"/>
	        <!-- 显示上传成功后的图片容器 -->
	        <div id="imglist"></div>
	    </div>
	</div>

5.写JS代码

var uploader = WebUploader.create({
            // 选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收服务端 上传PHP的代码
            server: 'filesAdd',
            // 文件上传是携带参数
            formData: {
                _token: '{{csrf_token()}}'
            },
            // 文件上传是的表单名称
            fileVal: 'file',
            // 选择文件的按钮
            pick: {
                id: '#picker',
                // 是否开启选择多个文件的能力
                multiple: true
            },
            // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: true,
            duplicate: true
        });
        // 上传成功时的回调方法
        uploader.on('uploadSuccess', function (file, ret) {
            // 解决表单提交时，图片以#隔开解决
            let val = $('#fang_pic').val();
            let tmp = val + '#' + ret.url;
            $('#fang_pic').val(tmp);

            // 图片显示
            let imglist = $('#imglist');
            // 注：一定要用追加还是不html覆盖
            let html = `
	            <div style="position: relative;;width:100px;">
	                <img src="${ret.url}" style="width:100px;" />
	                <strong onclick="delpic(this,'${ret.url}')" style="position: absolute;right: 2px;top: 2px;color: white;font-size: 20px;">X<strong>
	            </div>
        	`;
            imglist.append(html);
        });

6.控制器方法

public function filesAdd(Request $request){

        if($request->hasFile('file')){
            //上传  配置的节点名称
            $ret=$request->file('file')->store('','fangattr');
            $pic = '/upload/' . $ret;
        }
        return ['status' => 0, 'url' => $pic];
    }

7.上传完成后在public目录下 会看到upload文件夹 上传后的图片就在那里了