图片导入的实现

原创
2016/10/15 10:56
阅读数 155

参考网页:

设想

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

一、安装

$ php composer.phar require bupy7/yii2-gridify-view "dev-master"
$ php composer.phar require kartik-v/yii2-dialog "*"

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

二、使用

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

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

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

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

2、设计动作

代码见于 ./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),
        ]);
    }

解释:

3、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;

解释:

  • $modelstring 类型,这是由 Controller 里 ArrayDataProvider$files 决定的。
  • $directoryAsset 是照片公开的文件夹。

4、Model 的实现

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

三、小结

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部