图片上传几乎是应用必备,前面也针对 做了一篇详细的说明,不过很多人反馈各种问题,下面针对 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官方的参数说明
视图文件
单图
PHP;">
field($model,'file')->widget('manks\FileInput',[
]);
?>
多图
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 项。控制器需要返回的数据格式如下
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',...];