七牛多图片直传widge [ 2.0 版本 ]

GitHub地址:https://github.com/pcyanglei/yii2-qiniu-images

有什么问题 欢迎大家留言

README

一款直传七牛的yii2图片widget 浏览器直传(没试过IE) 没有做分片上传

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist zh/yii2-qiniu-images "dev-master"
or add

"zh/yii2-qiniu-images": "*"
to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

<?= $form->field($model, 'images')->widget(QiniuFileInput::className(),[
    'options' => [
        'class' => 'btn-danger'//按钮class
    ],
    'qlConfig' => [
        'accessKey' => 'Q7wmo6VClEeYqnVnMSGdUBb7k0bl86KV5XLyh60N',
        'secretKey' => 'Y8JOtfZvHWsTXcy0CG_0zDNSrwls6p530k0LuT61',
        'scope'=>'test',
        'cdnUrl' => 'http://ouv520g7c.bkt.clouddn.com',//外链域名
    ],
    'clientOptions' => [
        'max' => 5,//最多允许上传图片个数
        'size' => 204800,//每张图片大小
        'btnName' => 'upload',//上传按钮名字
        'accept' => 'image/jpeg,image/gif,image/png'//上传允许类型
    ],
    'pluginEvents' => [
        'delete' => 'function(item){console.log(item)}',
        'success' => 'function(res){console.log(res)}'
    ]
]) ?>

流程 :

图片成功上传到七牛后,以数组的形式保存资源地址(外链域名+资源名)到当前模型的属性,例如:

当前goods模型 添加一个成员属性 images 只支持required规则
model

class Goods extends \yii\db\ActiveRecord
{

public $images;
/**
 * @inheritdoc
 */
public function rules()
{
    return [
        [['images'], 'required']
    ];
}

}
当提交form后端将收到如下类型的数据

[Goods] => Array

(
    [images] => Array
        (
            [0] => http://ouv520g7c.bkt.clouddn.com/2017/9/er14pygpvq.jpg
            [1] => http://ouv520g7c.bkt.clouddn.com/2017/9/r5c0eidcx8.jpg
        )
)

更新如何显示已有数据

$model->images = [

'http://ouv520g7c.bkt.clouddn.com/2017/9/er14pygpvq.jpg',
'http://ouv520g7c.bkt.clouddn.com/2017/9/r5c0eidcx8.jpg'

]