圖片上傳幾乎是應用必備，前面也針對 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', ...];
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。