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();
                                            });
                                        }
                                    });
                                }
                            });

</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);
        }

    }