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];
}

控制器添加商品方法

包含以下内容

render('create', hljs php">                ['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

最终实现的效果如下