yii2中使用webuploader實(shí)現(xiàn)圖片上傳的實(shí)戰(zhàn)項(xiàng)目
圖片上傳幾乎是應(yīng)用必備，前面也針對 kartik 的 fileinput 做了一篇詳細(xì)的說明，不過很多人反饋各種問題，下面針對 webuploader 的使用單獨(dú)寫了一個(gè)組件。該組件可以更好的處理 Yii2 在圖片上傳過程中帶來的一系列問題，目前支持多圖多字段多modal的混合上傳。
介紹之前我們先演示下效果。
安裝
推薦使用composer進(jìn)行安裝
$ php composer.phar require bailangzhan/yii2-webuploader dev-master
使用
params.php或者params-local.php內(nèi)增加webuploader和domain配置項(xiàng)
// 圖片服務(wù)器的域名設(shè)置，拼接保存在數(shù)據(jù)庫中的相對地址，可通過web進(jìn)行展示
'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官方的參數(shù)說明
視圖文件
單圖
<?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 項(xiàng)。控制器需要返回的數(shù)據(jù)格式如下
// 錯(cuò)誤時(shí)
{"code": 1, "msg": "error"}
// 正確時(shí)， 其中 attachment 指的是保存在數(shù)據(jù)庫中的路徑，url 是該圖片在web可訪問的地址
{"code": 0, "url": "http://domain/圖片地址", "attachment": "圖片地址"}
clientOptions同樣參考 webuploader官方的參數(shù)說明
注意
如果是修改的多圖片操作，務(wù)必保證 $model->file = 'src1,src2,src3,...'; 或者 $model->file = ['src1', 'src2'. 'src3', ...];
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
codeigniter自帶數(shù)據(jù)庫類使用方法說明
在 CodeIgniter 中，使用數(shù)據(jù)庫是非常頻繁的事情。你可以使用框架自帶的數(shù)據(jù)庫類，就能便捷地進(jìn)行數(shù)據(jù)庫操作2014-03-03
Thinkphp5 自定義上傳文件名的實(shí)現(xiàn)方法
這篇文章主要介紹了Thinkphp5 自定義上傳文件名的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了PHP開發(fā)框架laravel代碼提示示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
靜態(tài)成員是一種類變量，可以把它看成時(shí)屬于整個(gè)類而不是屬于類的某個(gè)實(shí)例。與一般的實(shí)例變量不同的是，靜態(tài)成員只保留一個(gè)變量值，而這個(gè)變量值對所有的實(shí)例都是有效的，也就是說，所有的實(shí)例共享這個(gè)成員，跟著小編一起去探討php static關(guān)鍵字吧2015-11-11
Zend Framework教程之Zend_Db_Table用法詳解
這篇文章主要介紹了Zend Framework教程之Zend_Db_Table用法,結(jié)合實(shí)例形式詳細(xì)分析了Zend_Db_Table的功能,使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-03-03
有時(shí)候我們需要批量添加用戶，只要把該php放進(jìn)UCenter目錄下,執(zhí)行就可以了。2012-07-07
ThinkPHP寫數(shù)組插入與獲取最新插入數(shù)據(jù)ID實(shí)例
這篇文章主要介紹了ThinkPHP寫數(shù)組插入與獲取最新插入數(shù)據(jù)ID的方法,實(shí)例講述了ThinkPHP基于數(shù)組操作數(shù)據(jù)庫的方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了PHP中仿制 ecshop驗(yàn)證碼實(shí)例,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了tp5框架無刷新分頁實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了thinkPHP5框架無刷新分頁相關(guān)原理、實(shí)現(xiàn)步驟與操作注意事項(xiàng),需要的朋友可以參考下2019-09-09
這篇文章主要介紹了PHP嵌套輸出緩沖代碼實(shí)例,本文講解嵌套使用ob系列函數(shù)的實(shí)例,需要的朋友可以參考下2015-05-05