摘要:我们在平常浏览别人的博客时发现,很多博客的文章列表在标题旁边都会有一张小小的图片,也就是这里说的标签图 缩率图。虽然,前面添加的创建文章功能也有标签图属性,不过似乎并不是上传图片的样式,而是普通的文本输入框。本次教程分享的内容就是教大家如何实现标签图上传功能。
我们在平常浏览别人的博客时发现,很多博客的文章列表在标题旁边都会有一张小小的图片,也就是这里说的标签图/缩率图。虽然,前面添加的创建文章功能也有标签图属性,不过似乎并不是上传图片的样式,而是普通的文本输入框。本次教程分享的内容就是教大家如何实现标签图上传功能。
本次分享用的是组件的方法实现标签图上传功能,之所以用组件,是因为方便快捷,而且用的是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', ] ]) ?>
页面效果: