laravel8 实现webuploader文件上传，删除，页面展示，上传至七牛云

1.下载webuploader 可到官网下载

2.页面引入webuploader（js和css）文件

<link rel="stylesheet" type="text/css" href="/admin/lib/webuploader/0.1.5/webuploader.css"/>   
 <script type="text/javascript" src="/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>

3.初始化webuploader 配置基本参数

<script type="text/javascript">
// 初始化Web Uploader
      var uploader = WebUploader.create({
        // 选完文件后，是否自动上传
        auto: true,
        // swf文件路径
        swf: 'admin/lib/webuploader/Uploader.swf',
        // 文件接收服务端 上传PHP的代码
        server: '{{ route('admin.landlord.upfile') }}',
        // 文件上传是携带参数
        formData: {
          _token: '{{csrf_token()}}'
        },
        // 后台接收的name
        fileVal: 'file',
        // 选择文件的按钮
        pick: {
          id: '#picker',
          // 是否开启选择多个文件的能力
          multiple: true
        },
        // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: true,
        duplicate:true
      });
</script>

4.上传成功后的回调

// 上传成功时的回调方法
      uploader.on('uploadSuccess', function (file, ret) {
        // 解决表单提交时，图片以#隔开解决,表单隐藏域的id
        let val = $('#hidden').val();
        let tmp = val + '#' + ret.data;
        $('#hidden').val(tmp);

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

5.删除页面中的图片

      // 删除图片
      function delpic(obj, picurl) {
        let url = "{{ route('admin.delfile') }}?file=" + picurl;
        // 发起请求删除
        fetch(url);
        // 删除当前点击图片显示
        $(obj).parent().remove();
        // 修改隐藏域表单
        $('#hidden').val($('#hidden').val().replace(`#${picurl}`, ''));
      }

6.表单页面

<form>
                <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="hidden" id="hidden"/>
                    <!-- 显示上传成功后的图片容器 -->
                    <div id="imglist"></div>
                </div>
</form>

7.composer下载七牛云

composer require itbdw/laravel-storage-qiniu

8.打开 config 文件夹下的 app.php 文件，在 providers 中加入一下代码

itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class,

 9.打开 config 文件夹下的 filesystems.php 文件，在 disks中加入一下代码

'qiniu' => [  
            'driver'    => 'qiniu',  
            'domain'    => '',  //你的七牛域名  
            'access_key'=> '',    //AccessKey  
            'secret_key'=> '',   //SecretKey  
            'bucket'    => '',    //Bucket名字，即七牛云存储空间名称  
        ],

 10. 插入以下代码，这是个公共上传接口

    public static function qiniu($image){
        $disk = \Storage::disk('qiniu'); //使用七牛云上传
        $time = date('Y-m-d');

        $filename = $disk->put($time, $image);//上传

        if(!$filename) {
            return ['code'=>500,'msg'=>'失败成功','data'=> []];
        }
        $img_url = $disk->getDriver()->downloadUrl($filename); //获取下载链接

        return ['code'=>200,'msg'=>'上传成功','data'=> $img_url];
    }