最近在使用yii2开发一个表单页面的时候，有多图上传的需求，稍微找了找这方面的组件，基本都安利fileinput这个组件，于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中发现还是有不少小细节需要注意的，于是记录一下使用的过程。
这个库的github地址在这里，安装的部分就很常规了，按文档走就可以了。
我们来看官方文档展示的几个常规操作：
use kartik\widgets\fileinput // or 'use kartikile\fileinput' if you have only installed yii2-widget-fileinput in isolation // 使用activeform 和 model绑定的单张图片示例 echo $form->field($model, 'avatar')->widget(fileinput::classname(), [ 'options' => ['accept' => 'image/*'], ]); // 多图上传示例 echo '<label class="control-label">add attachments</label>'; echo fileinput::widget([ 'model' => $model, 'attribute' => 'attachment_1[]', 'options' => ['multiple' => true] ]); // 不绑定model的使用方法 echo '<label class="control-label">upload document</label>'; echo fileinput::widget([ 'name' => 'attachment_3', ]); // 不可点击的示例 echo '<label class="control-label">select attachment</label>'; echo fileinput::widget([ 'name' => 'attachment_4', 'disabled' => true ]);
而这些都是常规操作，我们来设想一下，我们要完成淘宝的商品添加，有个商品表，有着一对多关系的若干张图片，这时候就需要用到多图上传功能了。而且我们还希望上传图片是异步的，那么我们可以这么配置我们的fileinput组件
我要评论
<?= $form->field($model, 'image[]')->label($label)->widget(fileinput::classname(), [
// 'name' => 'imgselect',
'language' => 'zh-cn',
'options' => ['multiple' => true, 'accept' => 'image/*'],
'pluginoptions' => [
'initialpreview' => $initialpreview,
'initialpreviewconfig' => $initialpreviewconfig,
'allowedpreviewtypes' => ['image'],
'allowedfileextensions' => ['jpg', 'gif', 'png'],
'previewfiletype' => 'image',
'overwriteinitial' => false,
'browselabel' => '选择图片',
'msgfilestoomany' => "选择上传的图片数量({n}) 超过允许的最大图片数{m}！",
'maxfilecount' => 5,//允许上传最多的图片5张
'maxfilesize' => 2048,//限制图片最大200kb
'uploadurl' => url::to(['/upload/image']),
//'uploadextradata' => ['testid' => 'listimg'],
'uploadasync' => true,//配置异步上传还是同步上传
],
'pluginevents' => [
'filepredelete' => "function(event, key) {
return (!confirm('确认要删除'));
}",
'fileuploaded' => 'function(event, data, previewid, index) {
$(event.currenttarget.closest("form")).append(data.response.imgfile);
}',
'filedeleted' => 'function(event, key) {
$(event.currenttarget.closest("form")).find("#"+key).remove();
return;
}',
]
]); ?>
我们在控制器配置好图片浏览的配置，传入进来。代码里的关键点我已经加上了配置，我们可以看到，这时异步上传的url已经配置到了 upload/image 这个控制器里，而我们也在删除，上传等操作完成时加上了js的回调。
如上所述，我们罗列了一些都是组件 fileinput的基本属性和设置，如有所需，可查看文档看属性的详细说明。
看下上传图片的控制器里，我们是怎么写 actionimage 这个函数的
/**
* 上传图片到临时目录
* @return string
* @throws \yii\base\exception
*/
public function actionimage()
{
if (yii::$app->request->ispost) {
$res = [];
$initialpreview = [];
$initialpreviewconfig = [];
$images = uploadedfile::getinstancesbyname("uploadimage[image]");
if (count($images) > 0) {
foreach ($images as $key => $image) {
if ($image->size > 2048 * 1024) {
$res = ['error' => '图片最大不可超过2m'];
return json_encode($res);
}
if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
$res = ['error' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
return json_encode($res);
}
$dir = '/uploads/temp/';
//生成唯一uuid用来保存到服务器上图片名称
$pickey = toolextend::genuuid();
$filename = $pickey . '.' . $image->getextension();
//如果文件夹不存在，则新建文件夹
if (!file_exists(yii::getalias('@backend') . '/web' . $dir)) {
filehelper::createdirectory(yii::getalias('@backend') . '/web' . $dir, 777);
}
$filepath = realpath(yii::getalias('@backend') . '/web' . $dir) . '/';
$file = $filepath . $filename;
if ($image->saveas($file)) {
$imgpath = $dir . $filename;
/*image::thumbnail($file, 100, 100)
->save($file . '_100x100.jpg', ['quality' => 80]);
*/
// array_push($initialpreview, "<img src='" . $imgpath . "' class='file-preview-image' alt='" . $filename . "' title='" . $filename . "'>");
$config = [
'caption' => $filename,
'width' => '120px',
'url' => '../upload/delete', // server delete action
'key' => $pickey,
'extra' => ['filename' => $filename]
];
array_push($initialpreviewconfig, $config);
$res = [
"initialpreview" => $initialpreview,
"initialpreviewconfig" => $initialpreviewconfig,
"imgfile" => "<input name='image[]' id='" . $pickey . "' type='hidden' value='" . $imgpath . "'/>",
'filename' => $filename,
'imagepath' => $imgpath,
];
}
}
}
return json_encode($res);
}
}
到此，多图上传的工作我们也就完美的实现了。
为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。
至于删除函数就不讲了，只要在浏览里配置上删除的url，也是一样的操作咯。
总结
以上所述是小编给大家介绍的yii2多图上传组件的使用教程，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
[ACTF2020 新生赛]Include 1【文件包含】【读取代码】
算法题解 - 牛客编程巅峰赛S1第6场 - 黄金&钻石&王者组
推荐一个程序员必备网站之一：Dev Hints ，非常实用！
网友评论