amrozhou 2016-01-21 10:25:49 7670次浏览 4条评论 3 2 0

一。Model

1.模型对应数据库中添加图片相关字段:(ps:字段名随意)

picture1_path;picture1_base_url;

picture2_path;picture2_base_url

2.对应model中声明图片变量:(ps:用于传递数据,注意不是数据库字段)

use trntv\filekit\behaviors\UploadBehavior;

public $picture1;
public $picture2;

2.对应模型中重写behaviors():

public function behaviors()
{
    return [
        'picture1' => [
            'class' => UploadBehavior::className(),
            'attribute' => 'picture1',
            'pathAttribute' => 'picture1_path',
            'baseUrlAttribute' => 'picture1_base_url'
        ],
        'picture2' => [
            'class' => UploadBehavior::className(),
            'attribute' => 'picture2',
            'pathAttribute' => 'picture2_path',
            'baseUrlAttribute' => 'picture2_base_url'
        ]
    ];
}

3.对应模型中重写rule():

public function rules()
{
    return [
        //其他字段规则...
        [['picture1','picture2'],'safe']  
    ];
}

4.对应模型中重写attributeLabels()

public function attributeLabels()
{
    return [
        //其他字段标签...
        'picture1' => Yii::t('common', '照片1'),
        'picture2' => Yii::t('common', '照片2'),
        'picture1_base_url'=>Yii::t('common', '照片1'),
        'picture2_base_url'=>Yii::t('common', '照片2'),
    ];
}

5.对应模型中添加获取图片方法:(也可以写成一个方法,多传个_path参数)

//获取行照片1
public function getPicture1($default = null)
{
    return $this->picture1_path
    ? Yii::getAlias($this->picture2_base_url . '/' . $this->picture1_path)
    : $default;
}
    
//获取照片2
public function getPicture2($default = null)
{
    return $this->picture2_path
    ? Yii::getAlias($this->picture2_base_url . '/' . $this->picture2_path)
    : $default;
}

二、Contorller

1.引包:

use trntv\filekit\actions\UploadAction;
use trntv\filekit\actions\DeleteAction;
use Intervention\Image\ImageManagerStatic;

2.重写actions()方法:

public function actions()
{
    return [
        'avatar-upload' => [
            'class' => UploadAction::className(),
            'deleteRoute' => 'avatar-delete',
            'on afterSave' => function ($event) {
                /* @var $file \League\Flysystem\File */
                $file = $event->file;
                $img = ImageManagerStatic::make($file->read())->fit(215, 215);
                $file->put($img->encode());
            }
        ],
        'avatar-delete' => [
            'class' => DeleteAction::className()
        ]
    ];
}

三、View

1._form视图

<?php 
$form = ActiveForm::begin([
    'options' => ['enctype' => 'multipart/form-data'],  
]);
?>
<?= $form->field($model, 'picture1')->widget(\trntv\filekit\widget\Upload::classname(), [
          'url'=>['avatar-upload']//此处的‘avatar-upload’则是控制器中重写actions()的方法名
])
 ?>

2.view视图

<?= DetailView::widget([
        'model' => $model,
        'attributes' => [
           //其他需要显示的字段...
            [
                'attribute'=>'picture1_base_url',
                  'picture1_base_url:image',
                  'format' => ['image',['width'=>'100','height'=>'100','title'=>$model->picture1_base_url]],
                   'value'=> $model->getPicture1()
            ],
            [
                'attribute'=>'picture2_base_url',
                  'picture2_base_url:image',
                  'format' => ['image',['width'=>'100','height'=>'100','title'=>$model->picture2_base_url]],
                   'value'=> $model->getPicture2()
            ],
    ]) ?>

四:效果图

_form视图1



_form视图2



_form视图3



view视图

觉得很赞
  • 评论于 2016-02-27 01:50 举报

    如需同时上传多张图片,添加参数'maxNumberOfFiles',如下视图中:

    <?= $form->field($model, 'picture1')->widget(\trntv\filekit\widget\Upload::classname(), [
              'url'=>['avatar-upload','maxNumberOfFiles'=> 5]])// 5可以是任意你想同时上传图片的数量
     ?>
    
  • 评论于 2016-03-01 17:22 举报

    要是附上源码示例就更好了

    觉得很赞
  • 评论于 2016-03-17 23:26 举报

    请教怎么配置和像picture2_path 保存路径怎么弄呀?

    觉得很赞
  • 评论于 2016-03-21 23:48 举报

    图片怎么了

您需要登录后才可以评论。登录 | 立即注册