图片导入的实现

参考网页：

• https://github.com/bupy7/yii2-gridify-view
• http://demos.krajee.com/dialog

设想

用户点击朋友圈，能够选择更改头像。弹出对话框，选择头像。为简便，不增长剪切等功能，只提供在线更换，不提供上传功能。这个就是用于修改头像的。

1、安装

$ php composer.phar require bupy7/yii2-gridify-view "dev-master"

$ php composer.phar require kartik-v/yii2-dialog "*"

其中，第二项，可能须要安装附加插件。在开发网站的时候，不少插件已经安装上了，遇到不能解决的问题，欢迎在下面留言。

2、使用

对于照片显示，须要一个可以访问的地址，为了访问这些照片，把这些照片做为公开的，不加权限的，能够任意访问。本文页面采用的 AdminLTE，因此在这个基础上继续本教程，若有不能继续，请等待页面设计博客的出现，致歉。

一、选择好头像放置在一个公共文件夹

假设你已经安装 https://github.com/dmstr/yii2-adminlte-asset 的 AdminLTE。本文的照片均放在 ./vendor/almasaeed2010/adminlte/dist/img/ 里。

分为 MVC 三部分来讲。先说 C Controller。假设用的是 UserController

二、设计动做

代码见于 ./frontend/controllers/UserController.php

/**
     * change avatar for current user.
     * @param string $avatar
     * @return mixed
     */
    public function actionChangeAvatar($avatar = null)
    {
        if ($avatar != null) {
            $me = Yii::$app->user->identity;
            $me->avatar = $avatar;
            if ($me->save()) {
                Yii::$app->session->setFlash('success', '您成功设置这张图片为头像！');
            } else {
                Yii::$app->session->setFlash('error', '您头像设置失败！');
            }

            return $this->render('_avatar', [
                'model' => $avatar,
            ]);
        }
        $id = Yii::$app->user->id;
        $dir = "@vendor/almasaeed2010/adminlte/dist/img/";
        $files = scandir(BaseYii::getAlias($dir));
        $dataProvider = new ArrayDataProvider([
            'allModels' => $files,
        ]);

        if (Yii::$app->request->isAjax) {
            return $this->renderPartial('_changeavatar', [
                'dataProvider' => $dataProvider,
                'onlyItems' => true,
            ]);
        }
        return $this->render('changeavatar', [
            'dataProvider' => $dataProvider,
            'model' => $this->findModel($id),
        ]);
    }

解释：

• if (Yii::$app->request->isAjax) { 是为了自动加载的。
• 整个代码仿照 https://github.com/bupy7/yii2-gridify-view 示例作的。
• 有两个views 页面，分别 changeavatar,_changeavatar，_avatar

三、views 会有三部分

该V views 页面位于 ./frontend/views/user/ 下，

//changeavatar.php
<?php

use yii\helpers\Html;

/* @var $this yii\web\View */
/* @var $model common\models\User */

$this->title = $model->username;
$this->params['breadcrumbs'][] = ['label' => '朋友圈', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;

echo $this->render('_changeavatar', [
    'dataProvider' => $dataProvider,
]);

另一个代码为

//_changeavatar.php
<?php

use bupy7\gridifyview\GridifyView;

echo GridifyView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_avatar',
    'onlyItems' => isset($onlyItems) ? $onlyItems : false,
    'pluginOptions' => [
        'url' => ['change-avatar'],
        'srcNode' => '> div',
        'resizable' => true,
        'width' => '250px',
        'maxWidth' => '350px',
        'margin' => '20px',
    ],
]);

其中还有一个小页面 _avatar.php

//_avatar.php

<?php

use kartik\dialog\Dialog;
use yii\helpers\Url;
 
if ($model == '.' or $model == '..') {
    return;
}
 
$directoryAsset = Yii::$app->assetManager->getPublishedUrl('@vendor/almasaeed2010/adminlte/dist/');
$url = Url::to(['change-avatar', 'avatar' => $model]);

$btns = <<< HTML
<a type="button" href=$url>
    <img src="$directoryAsset/img/$model" alt="没有头像"/>
</a>
HTML;

echo $btns;

解释：

• $model 是 string 类型，这是由 Controller 里 ArrayDataProvider 和 $files 决定的。
• $directoryAsset 是照片公开的文件夹。

四、Model 的实现

本文采用的 common/models/User.php，为之添加一个 avatar 属性，char 类型，用于保存照片名字。

3、小结

该功能实现的思路，主要是照着示例作，中间的难点是没有考虑到 _avatar.php 中 $modle 是 string。在 Controller 里为了区分不一样的页面，使用 $avatar=null 来判断，不是很严格。