Web Uploader 文件上传的使用

Posted 2021-02-28 zqblog1314

Web Uploader 的使用

一、引用css

 {{-- webuploader上传样式 --}}
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/>

二、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-5">
                    <!-- 表单提交时的封面地址 方便服务器端的接收和存储 -->
                    <input type="hidden" name="pic" id="pic" value="{{ config(‘up.pic‘) }}">
                    {{--Web Uploader 要绑定的--}}
                    <div id="picker">上传文章封面</div>
                </div>
                {{--用于显示上传成功后的图片--}}
                <div class="formControls col-xs-4 col-sm-4">
                    <img src="" id="img" style="width: 50px;">
                </div>
            </div>

三、引入js

 <!-- webuploader上传js -->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>

四、js部分的编写

// 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传
                auto: true,
                // swf文件路径
                swf: ‘/webuploader/Uploader.swf‘,
                // 文件接收服务端 上传php的代码
                server: ‘{{ route(‘admin.article.upFile‘) }}‘,
                // 文件上传是携带参数
                formData: {
                    _token: ‘{{csrf_token()}}‘
                },
                // 文件上传是的表单名称
                fileVal: ‘file‘,
                // 选择文件的按钮
                pick: {
                    id: ‘#picker‘,
                    // 是否开启选择多个文件的能力,默认true
                    multiple: false
                },
                // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: true
            });
            // 上传成功时的回调方法

　　　　　　　　//file 上传成功后关于文件的信息  ret 服务器端返回的json数据

            uploader.on(‘uploadSuccess‘, function (file, ret) {
                console.log(file);
                console.log(ret);
                // 图片路径
                let src = ret.src;
                // 给表单添加value值
                $(‘#pic‘).val(src);
                // 给图片添加src
                $(‘#img‘).attr(‘src‘,src);
            });

五、服务器端代码的编写

public function upFile(Request $request)
    {
        //文件上传
        //默认封面图片
        $pic = config(‘upload.pic‘);

        if($request->hasFile(‘file‘))
        {
            //上传
            //参数2 配置的节点 名称
            $result = $request->file(‘file‘)->store(‘‘,‘article‘);
//            dump($result);
            $pic = ‘/uploads/article/‘.$result;
//            dd($pic);
        }
        $post = $request->except(‘_token‘);
        $post[‘pic‘] = $pic;
        //添加 入库操作
//        Article::create($post);
        return response()->json([‘status‘=>10001,‘msg‘=>‘上传成功！‘,‘src‘=>$pic]);
    }

六、留有bug

没有入库操作，因为不仅是上传文件，还有其他内容。。。。后续会更新。。。。