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

yii2-widget-fileinput 这个库的github地址在这里，安装的部分就很常规了，按文档走就可以了。

我们来看官方文档展示的几个常规操作：

use kartikwidgetsFileInput// or "use kartikileFileInput" 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 yiiaseException   */  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多图上传组件的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网页设计网站的支持！