tp5项目图片上传

控制器

    public function upload(){
        $file = request()->file('file');
        $arr =[];
        if($file){
            $info = $file->validate(['ext'=>'jpg,png,gif'])->move(ROOT_PATH.'public'.DS.'uploads');
            if($info){
                $arr['code'] = 1;
                $arr['msg'] = '/uploads/'.$info->getSaveName();
                
            }else{
                $arr['code'] = 2;
            }

        }else{
            $arr['code'] = 3;
        }
        return $arr;
    }
    //图片上传,ROOT_PATH表示根目录,DS表示点,getSaveName()为图片上传后的名字
视图html
<div class="layui-form-item">
                    <label class="layui-form-label">一队图片</label>
                    <div class="layui-input-block">
                      <button type="button" class="layui-btn" id="test2" >
                        上传图片
                      </button>
                      <img src="" alt="" id="img1">
                      <input type="hidden" name="img1" id="imgg1" value="">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">二队图片</label>
                    <div class="layui-input-block">
                      <button type="button" class="layui-btn" id="test3" >
                        上传图片
                      </button>
                      <img src="" alt="" id="img2">
                      <input type="hidden" name="img2" id="imgg2" value="">
                    </div>
                  </div>
 <script>
layui.use('upload', function(){
        var upload = layui.upload;
   
          //执行实例
        var uploadInst = upload.render({
          elem: '#test2' //绑定元素
          ,url: '{:url("Add/upload")}' //上传接口
          ,done: function(res){
          //上传完毕回调
          if(res.code == 1){
            document.getElementById('img1').src = res.msg;
            document.getElementById('imgg1').value = res.msg;
          }
        }
        ,error: function(){
        //请求异常回调
        }
      });
    });
    layui.use('upload', function(){
        var upload = layui.upload;
   
          //执行实例
        var uploadInst = upload.render({
          elem: '#test3' //绑定元素
          ,url: '{:url("Add/upload")}' //上传接口
          ,done: function(res){
          //上传完毕回调
          if(res.code == 1){
            document.getElementById('img2').src = res.msg;
            document.getElementById('imgg2').value = res.msg;
          }
        }
        ,error: function(){
        //请求异常回调
        }
      });
    });
    </script>
posted @ 2020-08-13 14:45  HighKK  阅读(452)  评论(0编辑  收藏  举报