微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

安装

推荐使用composer进行安装

使用

params.php或者params-local.php内增加webuploader和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官方的参数说明

视图文件

单图

rush:PHP;"> field($model,'file')->widget('manks\FileInput',[ ]); ?>

多图

rush:PHP;"> 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 项。控制器需要返回的数据格式如下

rush:PHP;"> // 错误时 {"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',...];

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐