本文作者:心月

YII2高级版框架搭建完整博客系统教程——文章标签图功能

心月IT博客 2019-03-13
YII2高级版框架搭建完整博客系统教程——文章标签图功能摘要:我们在平常浏览别人的博客时发现,很多博客的文章列表在标题旁边都会有一张小小的图片,也就是这里说的标签图 缩率图。虽然,前面添加的创建文章功能也有标签图属性,不过似乎并不是上传图片的样式,而是普通的文本输入框。本次教程分享的内容就是教大家如何实现标签图上传功能。

    我们在平常浏览别人的博客时发现,很多博客的文章列表在标题旁边都会有一张小小的图片,也就是这里说的标签图/缩率图。虽然,前面添加的创建文章功能也有标签图属性,不过似乎并不是上传图片的样式,而是普通的文本输入框。本次教程分享的内容就是教大家如何实现标签图上传功能。

文章缩略图

    本次分享用的是组件的方法实现标签图上传功能,之所以用组件,是因为方便快捷,而且用的是YII2官方的组件,安全也有保障。

1、下载组件

    图片上传组件下载

2、解压组件压缩包,重命名为file_upload,然后放进项目里 common/widgets

图片上传组件路径

3、在PostsController 中引入组件

引入图片上传组件

public function actions()
{
    return [
        'upload'=>[
            'class' => 'common\widgets\file_upload\UploadAction',     //这里扩展地址别写错
            'config' => [
                'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}",
            ]
        ]
    ];
}

4、在渲染create.php图中使用组件

这个组件有两种使用方法

#第一种 不带model
use common\widgets\file_upload\FileUpload;   //引入扩展

echo FileUpload::widget();

echo FileUpload::widget(['value'=>$url]);  //编辑时要带默认图,$url为图片地址
#第二种 带model
<?php $form = ActiveForm::begin(); ?>
        
    <?= $form->field($model, 'label_img')->widget('common\widgets\file_upload\FileUpload',[
        'config'=>[
            //图片上传的一些配置,不写调用默认配置
            'domain_url' => 'http://www.yii-china.com',
        ]
    ]) ?>
<?php ActiveForm::end(); ?>

这里我们使用第二种方法:

<?= $form->field($model, 'label_img')->widget('common\widgets\file_upload\FileUpload',[
                'config'=>[
                    'domain_url' => 'http://frontend.yii2.com',
                ]
            ]) ?>

标签图上传组件

页面效果:

标签图上传效果


文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-03-13
若转载请注明原文及出处:https://www.xinyueseo.com/yii/179.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 1 条评论,人围观)参与讨论
    网友昵称:心月IT博客网友
    心月IT博客网友游客2019-08-08回复
    请求地址错误