yii2多图上传组件的使用教程

最近在使用yii2开发一个表单页面的时候，有多图上传的需求，稍微找了找这方面的组件，基本都安利fileInput这个组件，于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中发现还是有不少小细节需要注意的，于是记录一下使用的过程。

yii2-widget-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;      }',   ]]); ?>