yii2中怎么使用webuploader實現圖片上傳功能

這篇文章主要介紹了yii2中怎么使用webuploader實現圖片上傳功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

介紹之前我們先演示下效果。

安裝

推薦使用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 項?？刂破餍枰祷氐臄祿袷饺缦?/p>

// 錯誤時
{"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', ...];

感謝你能夠認真閱讀完這篇文章，希望小編分享的“yii2中怎么使用webuploader實現圖片上傳功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!