yii2 之图片上传插件fileinput使用说明

在网上搜了很多yii2图片上传插件，感觉这个和bootstrap融合的很好，比较能满足需求，故推荐给大家。
在使用过程中踩过不少坑，以下是具体使用说明。
本例所适用场景有一个商品表和一个商品图片表，商品图片表和商品表通过商品表ID对应。

开始前准备过程

$ php composer.phar require kartik-v/yii2-widget-fileinput "@dev"

or 在 composer.json 增加

"kartik-v/yii2-widget-fileinput": "@dev"

具体参考 https://github.com/kartik-v/yii2-widget-fileinput

配置图片上传路径

在 common/config/bootstrap.php 增加

Yii::setAlias('@uploadPath', dirname(dirname(__DIR__)) . '/upload');

创建 model文件 GoodsUploadForm.php

目录为 backend/models/form/

代码

<?php
/**
 * Created by PhpStorm.
 * User: Zhiqiang Guo
 * Date: 2017/8/1
 * Time: 10:39
 */

namespace backend\models\form;
use Yii;
use backend\models\GoodsPhoto;

/**
 * 图片上传
 * Class GoodsUploadForm
 * @package backend\models\form
 */
class GoodsUploadForm  extends GoodsPhoto
{

    public $imageFile;

    public function rules()
    {
        return [
            //数据验证这里可自己做
            [['imageFile'], 'file', 'skipOnEmpty' => true, 'extensions' => 'png,jpg,gif', 'maxFiles' => 4],
        ];
    }
    /**
     * 上传
     *
     * @author Zhiqiang Guo
     * @return void
     * @throws Exception
     * @access public
     */
    public function upload()
    {
        if ($this->validate()) {
            $path = Yii::getAlias('@uploadPath')  . date("Ymd");

            if (!is_dir($path) || !is_writable($path)) {
                \yii\helpers\FileHelper::createDirectory($path, 0777, true);
            }

            //upload_no 上传图片的商品的唯一码，为了在商品ID产生之前插入图片表数据标识。
            $uploadNo = Yii::$app->request->post('upload_no', '');
            //针对修改商品图片
            $goodsId = Yii::$app->request->post('goods_id', '0');
            foreach ($this->imageFile as $file) {
                $filedetail = '/goods_' . md5(uniqid() . mt_rand(10000, 99999999)) . '.' . $file->extension;
                $filePath = $path . $filedetail;   

                if ($file->saveAs($filePath)) {                   

                    //这里将上传成功后的图片信息保存到数据库
                    $imageUrl = $this->parseImageUrl($filePath);
                    $imageModel = new GoodsPhoto();
                    $imageModel->img = $imageUrl;
                    $imageModel->upload_no = $uploadNo;
                    $imageModel->goods_id = $goodsId;

                    $imageModel->save(false);
                    $imageId = Yii::$app->db->getLastInsertID();
                }
            }
            //图片上传后返回值
            return ['uploadNo' => $uploadNo, 'imageUrl' => $imageUrl,'imageId'=>$imageId];

        }
        return false;
    }

    /**
     * 这里在upload中定义了上传目录根目录别名，以及图片域名
     * @author Zhiqiang Guo
     * @return void
     * @throws Exception
     * @access public
     */
    private function parseImageUrl($filePath)
    {
        if (strpos($filePath, Yii::getAlias('@uploadPath')) !== false) {
            return  str_replace(Yii::getAlias('@uploadPath'), '', $filePath);
        } else {
            return $filePath;
        }
    }



}

视图view ,添加图片

参考如下

<div class="form-group">
            <label class="col-sm-3 control-label">图片上传</label>
            <div class="col-lg-5">
                <?php
                $uploadNo = uniqid() . mt_rand(1, 100);
                echo Html::hiddenInput('uploadNo', $uploadNo);

                ?>
                <?= $form->field($model, 'img')->hiddenInput()->label(false); ?>
                <?= $form->field($model, 'isad')->hiddenInput()->label(false); ?>
                <?= $form->field($upload, 'imageFile[]')->label(false)->widget(\kartik\file\FileInput::className(), [
                    'options' => [
                        'multiple' => true
                    ],
                    'pluginOptions' => [
                        // 异步上传的接口地址设置
                        'uploadUrl' => \yii\helpers\Url::to(['asyncphoto']),
                        'uploadAsync' => true,
                        // 异步上传需要携带的其他参数，比如商品id等,可选
                        'uploadExtraData' => [
                            'upload_no' => $uploadNo,
                        ],
                        // 需要预览的文件格式
                        'previewFileType' => 'image',
                        //是否显示文件名
                        'showCaption' => true,
                        // 预览的文件
                        'initialPreview' => isset($p1) ? $p1 : '',
                        // 需要展示的图片设置，比如图片的宽度等
                        'initialPreviewConfig' => isset($p2) ? $p2 : '',
                        // 是否展示预览图
                        'initialPreviewAsData' => true,
                        // 最少上传的文件个数限制
                        'minFileCount' => 1,
                        // 最多上传的文件个数限制,需要配置`'multiple'=>true`才生效
                        'maxFileCount' => 10,
                        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
                        'showRemove' => false,
                        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
                        'showUpload' => true,
                        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
                        'showBrowse' => true,
                        // 展示图片区域是否可点击选择多文件
                        'browseOnZoneClick' => true,
                        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
                        'fileActionSettings' => [
                            // 设置具体图片的查看属性为false,默认为true
                            'showZoom' => true,
                            // 设置具体图片的上传属性为true,默认为true
                            'showUpload' => false,
                            // 设置具体图片的移除属性为true,默认为true
                            'showRemove' => true,
                        ],
                    ],
                    //网上很多地方都没详细说明回调触发事件，其实fileupload为上传成功后触发的，三个参数，主要是第二个，有formData，jqXHR以及response参数，上传成功后返回的ajax数据可以在response获取
                    'pluginEvents' => [
                        'fileuploaded' => "function (object,data){ 
//                    console.log(data.response.imageUrl);
                    $('form #goods-img').val(data.response.imageUrl);
                    $('form #goods-isad').val(data.response.imageId);

            }",
                        //错误的冗余机制
                        'error' => "function (){
                alert('图片上传失败');
            }"
                    ]
                ]); ?>
            </div>
        </div>

视图view修改图片

参考如下

 <div class="form-group">
            <label class="col-sm-3 control-label">图片上传</label>
            <div class="col-lg-5">                
                <?= $form->field($upload, 'imageFile[]')->label(false)->widget(\kartik\file\FileInput::className(), [
                    'options' => [
                        'multiple' => true
                    ],
                    'pluginOptions' => [
                        // 异步上传的接口地址设置
                        'uploadUrl' => \yii\helpers\Url::to(['asyncphoto']),
                        'uploadAsync' => true,
                        // 异步上传需要携带的其他参数，比如商品id等,可选
                        'uploadExtraData' => [
                            'goods_id' => $model->goods_id,
                        ],
                        // 需要预览的文件格式
                        'previewFileType' => 'image',
                        // 预览的文件
                        'initialPreview' => isset($p1) ? $p1 : '',
                        // 需要展示的图片设置，比如图片的宽度等
                        'initialPreviewConfig' => isset($p2) ? $p2 : '',
                        // 是否展示预览图
                        'initialPreviewAsData' => true,
                        //是否覆盖初始图片
                        'overwriteInitial' => false,
                        // 最少上传的文件个数限制
                        'minFileCount' => 1,
                        // 最多上传的文件个数限制,需要配置`'multiple'=>true`才生效
                        'maxFileCount' => 10,
                        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
                        'showRemove' => false,
                        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
                        'showUpload' => true,
                        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
                        'showBrowse' => true,
                        // 展示图片区域是否可点击选择多文件
                        'browseOnZoneClick' => true,
                        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
                        'fileActionSettings' => [
                            // 设置具体图片的查看属性为false,默认为true
                            'showZoom' => true,
                            // 设置具体图片的上传属性为true,默认为true
                            'showUpload' => false,
                            // 设置具体图片的移除属性为true,默认为true
                            'showRemove' => true,
                        ],
                    ],
                    //网上很多地方都没详细说明回调触发事件，其实fileupload为上传成功后触发的，三个参数，主要是第二个，有formData，jqXHR以及response参数，上传成功后返回的ajax数据可以在response获取
                    'pluginEvents' => [
                        'fileuploaded' => "function (object,data){ 
//                    console.log(data.response.imageUrl);
                    $('form #goods-img').val(data.response.imageUrl);
                    $('form #goods-isad').val(data.response.imageId);

            }",
                        //错误的冗余机制
                        'error' => "function (){
                alert('图片上传失败');
            }"
                    ]
                ]); ?>
            </div>
        </div>

对应控制器方法异步处理上传图片

  /**
     * No explanation
     *
     * @author Zhiqiang Guo
     * @return void
     * @throws Exception
     * @access public
     */
    public function actionAsyncphoto()
    {
        $uploadForm = new GoodsUploadForm();

        if (Yii::$app->request->isPost) {

            $uploadForm->imageFile = UploadedFile::getInstances($uploadForm, 'imageFile');
            if ($imageArr = $uploadForm->upload()) {
                $p1 = $p2 = [];
                $p1[] = $imageArr['imageUrl'];
                $p2[] = ['url' => Url::toRoute('/goods/photodelete'), 'key' => $imageArr['imageId']];


                echo Json::encode([
                    'uploadNo' => $imageArr['uploadNo'],
                    'imageUrl' => $imageArr['imageUrl'],
                    'imageId' => $imageArr['imageId'],
                    'initialPreview' => $p1,
                    'initialPreviewConfig' => $p2,
                    'append' => true,
//                    'error'   => ''       //上传的error字段，如果没有错误就返回空字符串，否则返回错误信息，客户端会自动判定该字段来认定是否有错
                ]);
            } else {
                echo Json::encode([
                    'imageUrl' => '',
                    'error' => '文件上传失败'
                ]);
            }
        }
    }

控制器删除图片方法

    /**
     * 删除图片
     *
     * @author Zhiqiang Guo
     * @return void
     * @throws Exception
     * @access public
     */
    public function actionPhotodelete()
    {
        if ($id = Yii::$app->request->post('key')) {
            Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
            $model = new GoodsPhoto();
            $data['goods_photo_id'] = $id;
            $res = $model->selwhere($data);
            if ($res[0]['is_ad'] == 1) {
                return ['error' => '宣传图不可删除！'];
            }
            if (!$model->deletes(['goods_photo_id' => $id])) {
                return ['success' => false];
            }
        }
        return ['success' => true];
    }

控制器添加商品方法

包含以下内容

                ['model' => $model,
                    'upload' => new GoodsUploadForm(),
                ]);

控制器修改商品

包含以下内容

            $goodsphotoArr = GoodsPhoto::find()->where(['goods_id' => $id])->asArray()->all();
            $p1 = $p2 = [];
            if ($goodsphotoArr) {
                foreach ($goodsphotoArr as $k => $v) {
                    $p1[$k] = $v['img'];
                    $p2[$k] = [
                        'url' => Url::toRoute('/goods/photodelete'),
                        'key' => $v['goods_photo_id'],
                    ];
                }
            }
            return $this->render('update', ['model' => $model,
                    'upload' => new GoodsUploadForm(),
                    'p1' => $p1,
                    'p2' => $p2,
                ]

            );

组件 FileInput的基本属性和设置

可参考
http://plugins.krajee.com/file-input#option-initialpreviewconfig

最终实现的效果如下