yii2中使用webuploader實(shí)現(xiàn)圖片上傳的實(shí)戰(zhàn)項(xiàng)目
圖片上傳幾乎是應(yīng)用必備，前面也針對 kartik 的 fileinput 做了一篇詳細(xì)的說明，不過很多人反饋各種問題，下面針對 webuploader 的使用單獨(dú)寫了一個組件。該組件可以更好的處理 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ù)格式如下
// 錯誤時
{"code": 1, "msg": "error"}
// 正確時， 其中 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)文章
這篇文章主要介紹了解讀PHP中上傳文件的處理問題的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-05-05
PHP中file_get_contents函數(shù)抓取https地址出錯的解決方法(兩種方法)
本文通過兩種方法解決PHP中file_get_contents函數(shù)抓取https地址出錯，需要的朋友可以參考下2015-09-09
thinkPHP連接sqlite3數(shù)據(jù)庫的實(shí)現(xiàn)方法(附Thinkphp代碼生成器下載)
這篇文章主要介紹了thinkPHP連接sqlite3數(shù)據(jù)庫的實(shí)現(xiàn)方法,涉及thinkPHP的數(shù)據(jù)庫相關(guān)配置技巧,并附帶了Thinkphp代碼生成器供讀者下載使用,需要的朋友可以參考下2016-05-05
PHP7 安裝event擴(kuò)展的實(shí)現(xiàn)方法
這篇文章主要介紹了PHP7 安裝event擴(kuò)展的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了PHP微信開發(fā)之簡單實(shí)現(xiàn)上傳臨時素材的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-06-06
PHP中如何使用session實(shí)現(xiàn)保存用戶登錄信息
這篇文章主要給大家介紹在php中是如何使用session實(shí)現(xiàn)保存用戶登錄信息的，涉及到php session 用戶登錄等一些知識點(diǎn)，使用session保存用戶登錄信息要比cookie安全很多。感興趣的朋友一起學(xué)習(xí)吧2015-10-10
這篇文章主要給大家介紹了關(guān)于Windows下配置Nginx和PHP的步驟及測試,文中包括了在Windows環(huán)境下配置Nginx和PHP的步驟,包括下載、解壓、配置和測試,通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
Yii2簡單實(shí)現(xiàn)給表單添加驗(yàn)證碼的方法
這篇文章主要介紹了Yii2簡單實(shí)現(xiàn)給表單添加驗(yàn)證碼的方法,簡單分析了Yii中控制器的相關(guān)設(shè)置、表單模型的創(chuàng)建及視圖的調(diào)用技巧,需要的朋友可以參考下2016-07-07
將博客園(cnblogs.com)數(shù)據(jù)導(dǎo)入到wordpress的代碼
博客園限制太多，于是決定從博客園(cnblogs)更換自己個人的博客。WORDPRESS口碑還不錯，于是決定用用看。之前發(fā)的數(shù)百篇日志需要導(dǎo)入過來，在網(wǎng)上搜了一會，發(fā)現(xiàn)沒有這個插件，無奈只能自己寫一個2013-01-01
本文為大家介紹下利用PHP5中GD庫生成圖形驗(yàn)證碼而且?guī)в袧h字，具體的實(shí)現(xiàn)思路及代碼如下，有需求的朋友可以參考下，希望對大家學(xué)習(xí)php有所幫助2013-07-07