yii2如何利用webuploader實現圖片上傳的執行個體分析

本篇文章主要主要介紹了yii2中使用webuploader實現圖片上傳的實戰項目，具有一定的參考價值，有興趣的同學可以瞭解一下

圖片上傳幾乎是應用必備，前面也針對 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', ...];