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(),]);

控制器修改商品