• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
gui57 显示全部楼层 发表于 2021-10-25 20:29:35 |阅读模式 打印 上一主题 下一主题
最近在利用yii2开发一个表单页面的时间,有多图上传的需求,轻微找了找这方面的组件,根本都安利fileInput这个组件,于是就实验着利用这个库来完成后端表单页面的多图上传功能。利用的过程中发现还是有不少小细节必要注意的,于是记录一下利用的过程。
yii2-widget-fileinput 这个库的github地址在这里,安装的部门就很通例了,按文档走就可以了。
我们来看官方文档展示的几个通例操作:
  1. use kartik\widgets\FileInput
  2. // or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation
  3. // 使用ActiveForm 和 model绑定的单张图片示例
  4. echo $form->field($model, 'avatar')->widget(FileInput::classname(), [
  5.   'options' => ['accept' => 'image/*'],
  6. ]);
  7. // 多图上传示例
  8. echo '<label class="control-label">Add Attachments</label>';
  9. echo FileInput::widget([
  10.   'model' => $model,
  11.   'attribute' => 'attachment_1[]',
  12.   'options' => ['multiple' => true]
  13. ]);
  14. // 不绑定model的使用方法
  15. echo '<label class="control-label">Upload Document</label>';
  16. echo FileInput::widget([
  17.   'name' => 'attachment_3',
  18. ]);
  19. // 不可点击的示例
  20. echo '<label class="control-label">Select Attachment</label>';
  21. echo FileInput::widget([
  22.   'name' => 'attachment_4',
  23.   'disabled' => true
  24. ]);
复制代码
而这些都是通例操作,我们来设想一下,我们要完成淘宝的商品添加,有个商品表,有着一对多关系的若干张图片,这时间就必要用到多图上传功能了。而且我们还希望上传图片是异步的,那么我们可以这么设置我们的fileInput组件
  1. <?= $form->field($model, 'image[]')->label($label)->widget(FileInput::classname(), [
  2.   // 'name' => 'ImgSelect',
  3.   'language' => 'zh-CN',
  4.   'options' => ['multiple' => true, 'accept' => 'image/*'],
  5.   'pluginOptions' => [
  6.     'initialPreview' => $initialPreview,
  7.     'initialPreviewConfig' => $initialPreviewConfig,
  8.     'allowedPreviewTypes' => ['image'],
  9.     'allowedFileExtensions' => ['jpg', 'gif', 'png'],
  10.     'previewFileType' => 'image',
  11.     'overwriteInitial' => false,
  12.     'browseLabel' => '选择图片',
  13.     'msgFilesTooMany' => "选择上传的图片数量({n}) 超过允许的最大图片数{m}!",
  14.     'maxFileCount' => 5,//允许上传最多的图片5张
  15.     'maxFileSize' => 2048,//限制图片最大200kB
  16.     'uploadUrl' => Url::to(['/upload/image']),
  17.     //'uploadExtraData' => ['testid' => 'listimg'],
  18.     'uploadAsync' => true,//配置异步上传还是同步上传
  19.   ],
  20.   'pluginEvents' => [
  21.     'filepredelete' => "function(event, key) {
  22.         return (!confirm('确认要删除'));
  23.       }",
  24.     'fileuploaded' => 'function(event, data, previewId, index) {
  25.         $(event.currentTarget.closest("form")).append(data.response.imgfile);
  26.       }',
  27.     'filedeleted' => 'function(event, key) {
  28.         $(event.currentTarget.closest("form")).find("#"+key).remove();
  29.         return;
  30.       }',
  31.   ]
  32. ]); ?>
复制代码
我们在控制器设置好图片浏览的设置,传入进来。代码里的关键点我已经加上了设置,我们可以看到,这时异步上传的url已经设置到了 upload/image 这个控制器里,而我们也在删除,上传等操作完成时加上了js的回调。
如上所述,我们罗列了一些都是组件 FileInput的根本属性和设置,如有所需,可查看文档看属性的详细阐明。
看下上传图片的控制器里,我们是怎么写 actionImage 这个函数的
  1. /**
  2.   * 上传图片到临时目录
  3.   * @return string
  4.   * @throws \yii\base\Exception
  5.   */
  6. public function actionImage()
  7. {
  8.    if (Yii::$app->request->isPost) {
  9.      $res = [];
  10.      $initialPreview = [];
  11.      $initialPreviewConfig = [];
  12.      $images = UploadedFile::getInstancesByName("UploadImage[image]");
  13.      if (count($images) > 0) {
  14.        foreach ($images as $key => $image) {
  15.          if ($image->size > 2048 * 1024) {
  16.            $res = ['error' => '图片最大不可超过2M'];
  17.            return json_encode($res);
  18.          }
  19.          if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
  20.            $res = ['error' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
  21.            return json_encode($res);
  22.          }
  23.          $dir = '/uploads/temp/';
  24.          //生成唯一uuid用来保存到服务器上图片名称
  25.          $pickey = ToolExtend::genuuid();
  26.          $filename = $pickey . '.' . $image->getExtension();
  27.          //如果文件夹不存在,则新建文件夹
  28.          if (!file_exists(Yii::getAlias('@backend') . '/web' . $dir)) {
  29.            FileHelper::createDirectory(Yii::getAlias('@backend') . '/web' . $dir, 777);
  30.          }
  31.          $filepath = realpath(Yii::getAlias('@backend') . '/web' . $dir) . '/';
  32.          $file = $filepath . $filename;
  33.          if ($image->saveAs($file)) {
  34.            $imgpath = $dir . $filename;
  35.            /*Image::thumbnail($file, 100, 100)
  36.              ->save($file . '_100x100.jpg', ['quality' => 80]);
  37. */
  38.           //  array_push($initialPreview, "<img src='" . $imgpath . "' class='file-preview-image' alt='" . $filename . "' title='" . $filename . "'>");
  39.            $config = [
  40.              'caption' => $filename,
  41.              'width' => '120px',
  42.              'url' => '../upload/delete', // server delete action
  43.              'key' => $pickey,
  44.              'extra' => ['filename' => $filename]
  45.            ];
  46.            array_push($initialPreviewConfig, $config);
  47.            $res = [
  48.              "initialPreview" => $initialPreview,
  49.              "initialPreviewConfig" => $initialPreviewConfig,
  50.              "imgfile" => "<input name='image[]' id='" . $pickey . "' type='hidden' value='" . $imgpath . "'/>",
  51.              'filename' => $filename,
  52.              'imagePath' => $imgpath,
  53.            ];
  54.          }
  55.        }
  56.      }
  57.      return json_encode($res);
  58.    }
  59. }
复制代码
到此,多图上传的工作我们也就完美的实现了。
为了实现图片的删除结果,这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以革新当前页面,因为一开始我们就在controller中实现了图片的预览工作,以是理应会展示我们已经上传的两张图片。
至于删除函数就不讲了,只要在浏览里设置上删除的url,也是一样的操作咯。
总结
以上所述是小编给大家先容的yii2多图上传组件的利用教程,希望对大家有所资助,如果大家有任何疑问请给我留言,小编会及时复兴大家的。在此也非常感谢大家对草根技术分享网站的支持!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作