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

最近在使用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 
 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; 
     
   //  array_push($initialPreview, ""); 
    $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" => "",
      'filename' => $filename,
      'imagePath' => $imgpath,
    ]; 
  }
} 
     } 
     return json_encode($res); 
   } 
 }

到此，多图上传的工作我们也就完美的实现了。

为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。

上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。

至于删除函数就不讲了，只要在浏览里配置上删除的url，也是一样的操作咯。

总结

以上所述是小编给大家介绍的yii2多图上传组件的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！