layui+thinkphp5上传七牛云

小白一个，最近在写上传的功能比较多分享一下，写的不好多多评论，话不多说上代码
七牛的配置信息我全写在config里面了你们可以看代码需要什么去到config里配置
记得要下sdk包
这个是七牛官网的下载地址https://developer.qiniu.com/kodo/sdk/1241/php
引用

use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
use Qiniu\Storage\BucketManager;

    /**
    * 七牛图片上传
    * @return String 图片的完整URL
    */
    public function upload()
    {
        if($this->request->isAjax()){
            $file = request()->file($_FILES);
            // $a=Db::name('qiye')->where('id',$id)->field('id,img')->find();
            $file= $file['file'];
            // dump($file);
            require_once APP_PATH . '/../vendor/qiniu/autoload.php';
            // 需要填写你的 Access Key 和 Secret Key
            $accessKey = config('accessKey');
            $secretKey = config('secretKey');
            // 构建鉴权对象
            $auth = new Auth($accessKey, $secretKey);
            // 要上传的空间
            $bucket = config('bucket');
            $domain = config('DomainImage');
            $url = config('url');
            $token = $auth->uploadToken($bucket);
            // 初始化 UploadManager 对象并进行文件的上传
            $uploadMgr = new UploadManager();
            // 调用 UploadManager 的 putFile 方法进行文件的上传
            list($ret, $err) = $uploadMgr->putFile($token, $file['name'],$file['tmp_name']);
            if ($err !== null) {
                return ["err"=>1,"msg"=>$err,"data"=>""];
            } else {
                //返回图片的完整URL
                return ["code"=>"2","msg"=>"上传完成","data"=>($url .'/'. $file['name']),"url"=>$file['tmp_name']];
            }
        }
    }

这个是页面的上传的按钮

    <!-- 上传图片 -->
    <div style="width: 100%;float: left;" id="uploadlist">
     <label class="layui-form-label">图片</label>
      <div  style="float: left;" >
        <div class="layui-upload-list">
          <p id="demoText"></p>
          <button type="button" class="layui-btn" id="up0">上传图片</button>
        </div>
      </div>

如果需要修改,删除或者展示的话可以看看这个挺好玩的

      <!-- 循环图片 -->
      {notempty name="$enterprise"}
      {foreach $enterprise.img as $k =>$v}
      <div  style="float: left;margin-left:20px" class="deleted{$k}">
        <div class="layui-upload-list">
         <img name="img" class="layui-upload-img" id="demo1" width="150" height="150" src="{$enterprise.shuffling[$k]}">
          <p id="demoText"></p>
          <button type="reset" class="layui-btn but2" lay-submit lay-filter="clear" data_id="{$k}" id="clear">删除图片</button>
        </div>
      </div>
      {/foreach}
      {/notempty}
      </div>

删除的js

    <!-- 删除 -->
    <script type="text/javascript">
        $(document).on("click","#clear",function(e){
          var that = this;
          var id = $(this).attr("data_id");
          console.log(id);
          $(".deleted"+id).remove();

        });
    </script>

图片的上传和提交写的比较乱，看看就行了hhhh，点击上传会返回一个地址，然后循环一段html，删除是定义了一个值，循环一个附一个值，点击删除就移除这个值

    <!-- 图片上传和提交-->
    <input type="hidden" id="ids" value="0">
    <script>
      // var ChouseImage = [{notempty name="$enterprise.img"}];
    layui.use('upload', function(){
      var upload = layui.upload;
      //执行实例
      // var id = document.getElementById("id").value;
      var uploadInst = upload.render({
        elem: '#up0' //绑定元素
        ,url: "{:url('admin/enterprise/upload')}" //上传接口
        // ,data:{id}
        ,multiple:true
        ,done: function(res){
          // ChouseImage.push(res.data)
            // console.log(res)
          if(res.code == 2) {

              var keysss = $("#ids").val();

          let html = 
          `<div  style="float: left;margin-left:20px" class="deleted${keysss}">
            <div class="layui-upload-list">
              <img name="img" class="layui-upload-img" id="demo1" width="150" height="150" src=${res.data} >
              <p id="demoText"></p>
              <button type="reset" class="layui-btn but2" lay-submit lay-filter="clear" data_id="${keysss}" class="class" id="clear">删除图片</button>
            </div>
          </div>`
          keysss++;
          $("#ids").val(keysss);
            $('#uploadlist').append(html);
            $('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.id +'">');
          } else {
            layer.msg(res.msg);
          }
        }
        ,success:function(res){
        }
        ,error: function(){
          //请求异常回调
          //演示失败状态，并重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败,重新上传</span>');
        }
      });
    });
      layui.use(['layer', 'form'], function() {
          var layer = layui.layer,
              $ = layui.jquery,
              form = layui.form;
          $(window).on('load', function() {
              form.on('submit(admin)', function(data) {
                var ChouseImage = [];
                var El = Array.from($('.layui-upload-list img'))
                El.forEach((el,index)=>{
                // if(index>0){
                ChouseImage.push(el.src)
              // }
             })
                  $.ajax({
                      url:"{:url('admin/enterprise/publish')}",
                      data:{data:$('#admin').serialize(),ChouseImage:ChouseImage.toString()},
                      // data:$('#admin').serialize(),ChouseImage:ChouseImage.toString(),
                      type:'post',
                      async: false,
                      success:function(res) {
                          if(res.code == 1) {
                              layer.alert(res.msg, function(index){
                                location.href = res.url;
                              })
                          } else {
                              layer.msg(res.msg);
                          }
                      }
                  })
                  return false;
              });
          });

      });

    </script>

二更新
发现这个删除有bug，然后换过了一种方式，就是计算删除的按键数

 var keysss = $("#ids").val();
 换成这句话
var keysss = $("button[type=reset1]").length;

增加一个js 计算按键

    <script type="text/javascript">
      console.log("HERE");
      let num = $("button[type=reset1]").length;
      console.log(num)
    </script>

总结
1.挑着看就好了
2.下载sdk包
3.配置七牛信息
4.前段获取图片地址，传后套
5.接收然后上传就好了