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中上传文件的处理问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)

    PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)

    本文通过两种方法解决PHP中file_get_contents函数抓取https地址出错,需要的朋友可以参考下
    2015-09-09
  • thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)

    thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)

    这篇文章主要介绍了thinkPHP连接sqlite3数据库的实现方法,涉及thinkPHP的数据库相关配置技巧,并附带了Thinkphp代码生成器供读者下载使用,需要的朋友可以参考下
    2016-05-05
  • PHP7 安装event扩展的实现方法

    PHP7 安装event扩展的实现方法

    这篇文章主要介绍了PHP7 安装event扩展的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • php微信开发之上传临时素材

    php微信开发之上传临时素材

    这篇文章主要为大家详细介绍了PHP微信开发之简单实现上传临时素材的相关资料,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • PHP中如何使用session实现保存用户登录信息

    PHP中如何使用session实现保存用户登录信息

    这篇文章主要给大家介绍在php中是如何使用session实现保存用户登录信息的,涉及到php session 用户登录等一些知识点,使用session保存用户登录信息要比cookie安全很多。感兴趣的朋友一起学习吧
    2015-10-10
  • Windows下配置Nginx和PHP的步骤及测试

    Windows下配置Nginx和PHP的步骤及测试

    这篇文章主要给大家介绍了关于Windows下配置Nginx和PHP的步骤及测试,文中包括了在Windows环境下配置Nginx和PHP的步骤,包括下载、解压、配置和测试,通过图文介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • Yii2简单实现给表单添加验证码的方法

    Yii2简单实现给表单添加验证码的方法

    这篇文章主要介绍了Yii2简单实现给表单添加验证码的方法,简单分析了Yii中控制器的相关设置、表单模型的创建及视图的调用技巧,需要的朋友可以参考下
    2016-07-07
  • 将博客园(cnblogs.com)数据导入到wordpress的代码

    将博客园(cnblogs.com)数据导入到wordpress的代码

    博客园限制太多,于是决定从博客园(cnblogs)更换自己个人的博客。WORDPRESS口碑还不错,于是决定用用看。之前发的数百篇日志需要导入过来,在网上搜了一会,发现没有这个插件,无奈只能自己写一个
    2013-01-01
  • PHP5中GD库生成图形验证码(有汉字)

    PHP5中GD库生成图形验证码(有汉字)

    本文为大家介绍下利用PHP5中GD库生成图形验证码而且带有汉字,具体的实现思路及代码如下,有需求的朋友可以参考下,希望对大家学习php有所帮助
    2013-07-07

最新评论