最近在使用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，也是一样的操作咯。

Tags: yii2多图上传组件

分享到：