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', ...];

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

相关文章

  • php记录搜索引擎爬行记录的实现代码

    php记录搜索引擎爬行记录的实现代码

    这篇文章主要介绍了php记录搜索引擎爬行记录的实现代码,然后在文中给大家补充介绍了php获取各搜索蜘蛛爬行记录的代码,需要的朋友可以参考下
    2018-03-03
  • php实现微信和支付宝支付的示例代码

    php实现微信和支付宝支付的示例代码

    这篇文章主要介绍了php实现微信和支付宝支付的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • php版微信发红包接口用法示例

    php版微信发红包接口用法示例

    这篇文章主要介绍了php版微信发红包接口用法,结合实例形式分析了php操作微信发红包接口的相关使用技巧,需要的朋友可以参考下
    2016-09-09
  • Laravel5中防止XSS跨站攻击的方法

    Laravel5中防止XSS跨站攻击的方法

    这篇文章主要介绍了Laravel5中防止XSS跨站攻击的方法,结合实例形式分析了Laravel5基于Purifier扩展包集成HTMLPurifier防止XSS跨站攻击的相关操作技巧,需要的朋友可以参考下
    2016-10-10
  • php利用ob_start()清除输出和选择性输出的方法

    php利用ob_start()清除输出和选择性输出的方法

    下面小编就为大家分享一篇php利用ob_start()清除输出和选择性输出的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Laravel中Facade的加载过程与原理详解

    Laravel中Facade的加载过程与原理详解

    Facade其实是一个容器中类的静态代理,他可以让你以静态的方式来调用存放在容器中任何对象的任何方法,下面这篇文章主要给大家介绍了关于Laravel中Facade的加载过程与原理的相关资料,需要的朋友可以参考下。
    2017-09-09
  • PHP 数组基本操作方法详解

    PHP 数组基本操作方法详解

    下面小编就为大家带来一篇PHP 数组基本操作方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • PHP生成各种常见验证码和Ajax验证过程

    PHP生成各种常见验证码和Ajax验证过程

    本文将通过实例讲解使用PHP生成各种常见的验证码包括数字验证码、数字+字母验证码、中文验证码、算术验证码等等以及其Ajax验证过程
    2016-01-01
  • WordPress中获取所使用的模板的页面ID的简单方法

    WordPress中获取所使用的模板的页面ID的简单方法

    这篇文章主要介绍了WordPress中获取所使用的模板的页面ID的简单方法,通过这个方法来获取页面的链接是比较方便的,需要的朋友可以参考下
    2015-12-12
  • 显示程序执行时间php函数代码

    显示程序执行时间php函数代码

    这篇文章介绍了显示程序执行时间php函数代码,有需要的朋友可以参考一下
    2013-08-08

最新评论