Yii+layui实现图片上传

本文讲述的是不基于YII插件生成页面的图片上传方式，有问题的地方，还请多多指教：

view页面代码如下：

<?php
use yii\helpers\Url;
use yii\helpers\Html;
?>

<?=Html::jsFile('@web/layui/layui.js')?>
<?=Html::jsFile('@web/js/jquery-3.3.1.min.js')?>
<?=Html::jsFile('@web/bootstrap/js/bootstrap.js')?>
<?=Html::cssFile('@web/layui/css/layui.css')?>
<?=Html::cssFile('@web/bootstrap/css/bootstrap.css')?>
<?=Html::cssFile('@web/bootstrap/css/bootstrap-theme.css')?>
<style>
    .layui-upload-img{
        max-height: 100px;
    }
</style>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规使用：普通图片上传</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1">
        <p id="demoText"></p>
    </div>
</div>
<script>
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: "<?=Url::to(['index/upload']);?>"
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code !== 10000) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                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>

controller代码：

<?php
namespace app\controllers;

use Yii;
use app\models\UploadForm;
use yii\web\Controller;
use yii\web\UploadedFile;

class IndexController extends Controller
{
    /**
     *
     * 主页
     * @return string
     * @author:
     * @date: 2019/4/3-16:26
     */
    public function actionIndex()
    {
        return $this->render('index');
    }

    public function actionUpload()
    {
        $model = new UploadForm();
        if(Yii::$app->request->isPost){
            $model->imageFile = UploadedFile::getInstanceByName('file');
            if($model->upload()){
                return json_encode(['code'=>10000]);
            }
            return json_encode(['code'=>10001]);
        }
    }
}

model代码：

<?php
namespace app\models;

use yii\base\Model;
use yii\web\UploadedFile;

class UploadForm extends Model
{
    public $imageFile;

    public function rules()
    {
        return [
            [['imageFile'], 'file', 'skipOnEmpty' => false, 'extensions' => 'png,jpg'],
        ];
    }

    /**
     *  文件上传
     * @return bool
     * @author:
     * @date: 2019/4/4-15:25
     */
    public function upload()
    {
        if ($this->validate()) {
            $dir = './uploads/' . date("Ym");
            if ( !is_dir($dir)) {
                mkdir($dir, 0777, true);
                chmod($dir, 0777);
            }
            $this->imageFile->saveAs($dir  . '/' . uniqid().rand(111111111,999999999) . '.' . $this->imageFile->extension);
            return true;
        } else {
            return false;
        }
    }

}

效果：