README

Yii 2 图片上传

通过 Composer 安装

运行以下命令

$ composer require oxy-coach/yii2-image-behavior "*"

或者添加

$ "oxy-coach/yii2-image-behavior": "*"

到你的 composer.json 文件的 require 部分。

迁移

通过以下命令创建迁移

$ yii migrate/create images

打开 /path/to/migrations/m_xxxxxx_xxxxxx_images.php 文件，并将以下代码添加到 up() 方法中

        $this->createTable('images', [
            'id' => $this->primaryKey(),
            'itemId' => $this->integer(11)->notNull(),
            'path' => $this->string(255),
            'extension' => $this->string(255)->notNull(),
            'sort' => $this->integer()->defaultValue(0),
        ]);

创建模型

为新的 images 表生成 Active Record 模型

配置

将行为附加到你的模型类

use oxycoach\imagebehavior\ImageBehavior;

\\ ...

    public $file;

    public function behaviors()
    {
        return [
            'ImageBehavior' => [
                'class' => ImageBehavior::class,
                'imageModel' => Images::class,
                'imageVariable' => 'file',
                'uploadPath' => '@upload',
                'webUpload' => '@webupload',
                'noImagePath' => '@webupload/no-photo.png',
                'multiple' => true,
                'sizes' => [
                    'original' => [
                        'folder' => 'images/original'
                    ],
                    'preview' => [
                        'folder' => 'images/preview',
                        'width' => 350,
                        'height' => 0, // "0" means auto-height
                    ],
                ],
            ],
        ];
    }

    public function rules()
    {
        [['file'], 'file', 'extensions' => ['png', 'jpg', 'jpeg', 'gif'], 'maxSize' => 1024*1024*1024, 'maxFiles' => 3],
    }

为 Images 模型添加关联

    /**
     * Images model relation
     * @return \yii\db\ActiveQuery
     */
    public function getImages()
    {
        return $this->hasMany(Images::class, ['itemId' => 'id'])
            ->alias('img')
            ->orderBy('img.sort ASC');
    }

注意，关联名 必须 是 images，

在这个配置下，如果文件哈希值是 "6e3c797abee0ff2803ef1f952f187d2f"，将会有 2 张图片

• @upload/images/original/6e/3c/{image 表中的 id}.jpg
• @upload/images/preview/6e/3c/{image 表中的 id}.jpg

为每个将要上传的图片

查看文件

查看文件的示例

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>
    <?= $form->field($model, 'file[]')->fileInput(['multiple' => true, 'accept' => 'image/*']) ?>
    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>
<?php ActiveForm::end(); ?>

注意，如果你需要一个单张图片的上传，你必须将行为中的 multiple 属性改为 false，将你的模型文件中的 maxFiles 属性改为 1，同时将你的视图表单字段也相应更改

<?= $form->field($model, 'file')->fileInput(['multiple' => false, 'accept' => 'image/*']) ?>

获取图片

获取单张图片

<img src="<?= $model->getImage('original') ?>" alt="">
<img src="<?= $model->getImage('preview') ?>" alt="">

获取所有图片

<?php foreach ($model->getAllImages('original') as $image) { ?>
    <img src="<?= $image ?>" alt="">
<?php } ?>