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

心月IT博客 03-13

默认

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

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

文章缩略图

本次分享用的是组件的方法实现标签图上传功能，之所以用组件，是因为方便快捷，而且用的是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',
                ]
            ]) ?>

标签图上传组件