tp与yii图片上传(layui)

html代码

<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
<script type="text/javascript" src="/layui/layui.js"></script>
  <div class="layui-upload">
      <button type="button" class="layui-btn btnUploadImg" data-url="upload.html"  id="test1">上传图片</button>
      <div class="layui-upload-list">
        <input type="hidden" id="input1" value="">
        <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px;">
        <p class="demoText"></p>
      </div>
  </div>
  <div class="layui-upload">
    <button type="button" class="layui-btn btnUploadImg" data-url="upload.html"  id="test2">上传图片</button>
    <div class="layui-upload-list">
        <input type="hidden" id="input2" value="">
        <img class="layui-upload-img" id="demo2" style="width: 100px;height: 100px;">
        <p class="demoText"></p>
    </div>
  </div>

js代码

<script>
//多个图片上传
layui.use(['form', 'layer', 'upload'], function () {
                                var form = layui.form
                                    , layer = layui.layer
                                    , $ = layui.jquery
                                    , upload = layui.upload;
                                var btnUpload = document.getElementsByClassName("btnUploadImg");
                                for (let i = 0; i < btnUpload.length; i++) {
                                    // var dataUrl = $(btnUpload[i]).attr("data-url");
                                    // var dataFile = $(btnUpload[i]).attr("data-file");
                                    //普通图片上传
                                    var uploadInst = upload.render({
                                        elem: '#' + btnUpload[i].id
                                        , url: '/pc/upload/upload'
                                        , accept: "file"
                                        // , exts: dataFile
                                        , before: function (obj) {
                                            var btnId = btnUpload[i].id;
                                            var imgId = $("#" + btnId).siblings("div").find("img").attr("id");
                                            //预读本地文件示例，不支持ie8
                                            obj.preview(function (index, file, result) {
                                                $('#' + imgId).attr('src', result); //图片链接（base64）
                                            });
                                        }
                                        , done: function (res) {
                                            if (res.code == 1) {
                                                //上传成功
                                                var btnId = btnUpload[i].id;
                                                var inputId = $("#" + btnId).siblings("div").find("input[type='hidden']").attr("id");
                                                layer.msg('上传成功', {icon: 6, time: 1000});
                                                $("#" + inputId).val(res.src)
                                            } else {
                                                return layer.msg(res.msg, {icon: 5});
                                            }
                                        }
                                        , error: function () {
                                            //演示失败状态，并实现重传
                                            var btnId = btnUpload[i].id;
                                            var demoText = $("#" + btnId).siblings("div").find('p');
                                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                            demoText.find('.demo-reload').on('click', function () {
                                                uploadInst.upload();
                                            });
                                        }
                                    });
                                }
                            });
//单个图片上传
layui.use('upload', function(){
      var upload = layui.upload;
      //执行实例
      var uploadInst = upload.render({
        elem: '#thumb' //绑定元素
        ,url: "{:url('common/upload')}" //上传接口
        ,data:{use:'article_thumb'}
        ,done: function(res){
          //上传完毕回调
          if(res.code == 2) {
            $('#demo1').attr('src',res.src);
            $('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.id +'">');
          } else {
            layer.msg(res.msg);
          }
        }
        ,error: function(){
          //请求异常回调
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
          });
        }
      });
    });

</script>

tp后台方法

 public function upload()
    {
        $file = request()->file('file');
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->validate(['size'=>102400,'ext'=>'jpeg,jpg,png,gif])->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                return json_encode(['code'=>1,'src'=>$info->getFilename()]);
            }else{
                // 上传失败获取错误信息
                return json_encode(['code'=>0,'msg'=>$file->getError()]);
            }
        }
    }

yii2后台方法

 public function actionUpload()
    {
        if (Yii::$app->request->isPost) {
            $file = UploadedFile::getInstanceByName('file');
            $datefilename = date('Ymd');
            $dir=Yii::getAlias('@webroot').'/upload/'.$datefilename .'/';
            if(!file_exists($dir)) {
                mkdir($dir,0777,true);
            }
            //获得文件扩展名
            $temp_arr = explode(".", $file->name);
            $file_ext = array_pop($temp_arr);
            $file_ext = trim($file_ext);
            $file_ext = strtolower($file_ext);
            $new_file_name = date("YmdHis") . '_' . rand(10000, 99999) . '.' . $file_ext;
            $name =Yii::getAlias('@webroot').'/upload/'.$datefilename .'/'.$new_file_name;
            $status = $file->saveAs($name,true);
            if($status){
                $res = [
                    'src'=>'/upload/'.$datefilename .'/'.$new_file_name,
                    'code'=>1
                ];
            }else{
                $res =[
                    'code'=>0,
                    'msg'=>'上传失败！'
                ];
            }
            return json_encode($res);
        }

    }