關於yii2中使用webuploader實作圖片上傳的程式碼

不言
發布: 2023-04-01 11:46:01
原創
2375 人瀏覽過

本篇文章主要主要介紹了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, &#39;file&#39;)->widget(&#39;manks\FileInput&#39;, [
  ]); 
?>
登入後複製

多圖

<?php 
echo $form->field($model, &#39;file2&#39;)->widget(&#39;manks\FileInput&#39;, [
  &#39;clientOptions&#39; => [
    &#39;pick&#39; => [
      &#39;multiple&#39; => true,
    ],
    // &#39;server&#39; => Url::to(&#39;upload/u2&#39;),
    // &#39;accept&#39; => [
    //   &#39;extensions&#39; => &#39;png&#39;,
    // ],
  ],
]); ?>
登入後複製

控制器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', ...];


以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於Yii實現的多級聯動下拉式選單

yii2實作分頁和帶搜尋的分頁功能

關於Yii2.0多重檔案上傳的程式碼

以上是關於yii2中使用webuploader實作圖片上傳的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
yii
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板