yii2中使用webuploader实现图片上传的实战项目

 更新时间:2017年09月08日 10:11:27   作者:白狼  
本篇文章主要主要介绍了yii2中使用webuploader实现图片上传的实战项目,具有一定的参考价值,有兴趣的同学可以了解一下

图片上传几乎是应用必备,前面也针对 kartik 的 fileinput 做了一篇详细的说明,不过很多人反馈各种问题,下面针对 webuploader 的使用单独写了一个组件。该组件可以更好的处理 Yii2 在图片上传过程中带来的一系列问题,目前支持多图多字段多modal的混合上传。

介绍之前我们先演示下效果。

安装

推荐使用composer进行安装

$ php composer.phar require bailangzhan/yii2-webuploader dev-master

使用

params.php或者params-local.php内增加webuploader和domain配置项

// 图片服务器的域名设置,拼接保存在数据库中的相对地址,可通过web进行展示
'domain' => 'http://blog.m/',
'webuploader' => [
  // 后端处理图片的地址,value 是相对的地址
  'uploadUrl' => 'blog/upload',
  // 多文件分隔符
  'delimiter' => ',',
  // 基本配置
  'baseConfig' => [
    'defaultImage' => 'http://img1.imgtn.bdimg.com/it/u=2056478505,162569476&fm=26&gp=0.jpg',
    'disableGlobalDnd' => true,
    'accept' => [
      'title' => 'Images',
      'extensions' => 'gif,jpg,jpeg,bmp,png',
      'mimeTypes' => 'image/*',
    ],
    'pick' => [
      'multiple' => false,
    ],
  ],
],

webuploader['baseConfig'] 参考 webuploader官方的参数说明

视图文件

单图

<?php 
  echo $form->field($model, 'file')->widget('manks\FileInput', [
  ]); 
?>

多图

<?php 
echo $form->field($model, 'file2')->widget('manks\FileInput', [
  'clientOptions' => [
    'pick' => [
      'multiple' => true,
    ],
    // 'server' => Url::to('upload/u2'),
    // 'accept' => [
    //   'extensions' => 'png',
    // ],
  ],
]); ?>

控制器 controller的地址可以在params.php或者params-local.php中配置 Yii::$app->params['webuploader']['uploadUrl'], 也可以在 clientOptions中配置 server 项。控制器需要返回的数据格式如下

// 错误时
{"code": 1, "msg": "error"}
// 正确时, 其中 attachment 指的是保存在数据库中的路径,url 是该图片在web可访问的地址
{"code": 0, "url": "http://domain/图片地址", "attachment": "图片地址"}

clientOptions同样参考 webuploader官方的参数说明 

注意

如果是修改的多图片操作,务必保证 $model->file = 'src1,src2,src3,...'; 或者 $model->file = ['src1', 'src2'. 'src3', ...];

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • codeigniter自带数据库类使用方法说明

    codeigniter自带数据库类使用方法说明

    在 CodeIgniter 中,使用数据库是非常频繁的事情。你可以使用框架自带的数据库类,就能便捷地进行数据库操作
    2014-03-03
  • Thinkphp5 自定义上传文件名的实现方法

    Thinkphp5 自定义上传文件名的实现方法

    这篇文章主要介绍了Thinkphp5 自定义上传文件名的实现方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • PHP开发框架laravel代码提示示例解析

    PHP开发框架laravel代码提示示例解析

    这篇文章主要为大家介绍了PHP开发框架laravel代码提示示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 开启PHP Static 关键字之旅模式

    开启PHP Static 关键字之旅模式

    静态成员是一种类变量,可以把它看成时属于整个类而不是属于类的某个实例。与一般的实例变量不同的是,静态成员只保留一个变量值,而这个变量值对所有的实例都是有效的,也就是说,所有的实例共享这个成员,跟着小编一起去探讨php static关键字吧
    2015-11-11
  • Zend Framework教程之Zend_Db_Table用法详解

    Zend Framework教程之Zend_Db_Table用法详解

    这篇文章主要介绍了Zend Framework教程之Zend_Db_Table用法,结合实例形式详细分析了Zend_Db_Table的功能,使用方法与相关注意事项,需要的朋友可以参考下
    2016-03-03
  • UCenter 批量添加用户的php代码

    UCenter 批量添加用户的php代码

    有时候我们需要批量添加用户,只要把该php放进UCenter目录下,执行就可以了。
    2012-07-07
  • ThinkPHP写数组插入与获取最新插入数据ID实例

    ThinkPHP写数组插入与获取最新插入数据ID实例

    这篇文章主要介绍了ThinkPHP写数组插入与获取最新插入数据ID的方法,实例讲述了ThinkPHP基于数组操作数据库的方法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-11-11
  • PHP中仿制 ecshop验证码实例

    PHP中仿制 ecshop验证码实例

    这篇文章主要介绍了PHP中仿制 ecshop验证码实例,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-01-01
  • tp5框架无刷新分页实现方法分析

    tp5框架无刷新分页实现方法分析

    这篇文章主要介绍了tp5框架无刷新分页实现方法,结合实例形式分析了thinkPHP5框架无刷新分页相关原理、实现步骤与操作注意事项,需要的朋友可以参考下
    2019-09-09
  • PHP嵌套输出缓冲代码实例

    PHP嵌套输出缓冲代码实例

    这篇文章主要介绍了PHP嵌套输出缓冲代码实例,本文讲解嵌套使用ob系列函数的实例,需要的朋友可以参考下
    2015-05-05

最新评论