집 > 기사 > 백엔드 개발 > yii2 다중 이미지 업로드 구성 요소 사용

yii2 다중 이미지 업로드 구성 요소 사용

不言원래의: 2018-05-10 09:34:521506검색

이 글은 주로 yii2 다중 이미지 업로드 구성요소의 사용을 소개합니다. 이제 이를 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

최근 양식 페이지를 개발할 때, 업로드 요구 사항과 관련하여 이 영역에서 구성 요소를 검색한 결과 기본적으로 Amway fileInput 구성 요소를 찾았으므로 이 라이브러리를 사용하여 백엔드 양식 페이지의 다중 이미지 업로드 기능을 완성해 보았습니다. 사용 과정에서 주의해야 할 작은 세부 사항이 여전히 많다는 것을 알게 되었기 때문에 사용 과정을 기록했습니다.

yii2-widget-fileinput 이 라이브러리의 github 주소는 여기에 있습니다. 설치 부분은 매우 일상적이므로 설명서를 따르십시오.

공식 문서에 표시된 몇 가지 일반적인 작업을 살펴보겠습니다.

use kartik\widgets\FileInput
// or &#39;use kartikile\FileInput&#39; if you have only installed yii2-widget-fileinput in isolation
// 使用ActiveForm 和 model绑定的单张图片示例
echo $form->field($model, &#39;avatar&#39;)->widget(FileInput::classname(), [
  &#39;options&#39; => [&#39;accept&#39; => &#39;image/*&#39;],
]);
// 多图上传示例
echo &#39;<label class="control-label">Add Attachments</label>&#39;;
echo FileInput::widget([
  &#39;model&#39; => $model,
  &#39;attribute&#39; => &#39;attachment_1[]&#39;,
  &#39;options&#39; => [&#39;multiple&#39; => true]
]);
// 不绑定model的使用方法
echo &#39;<label class="control-label">Upload Document</label>&#39;;
echo FileInput::widget([
  &#39;name&#39; => &#39;attachment_3&#39;,
]);
// 不可点击的示例
echo &#39;<label class="control-label">Select Attachment</label>&#39;;
echo FileInput::widget([
  &#39;name&#39; => &#39;attachment_4&#39;,
  &#39;disabled&#39; => true
]);

그리고 이것이 Taobao 제품 추가를 완료하고 싶다고 상상해 봅시다. -to-many. 서로 관련된 여러 장의 사진인 경우 다중 사진 업로드 기능을 사용해야 합니다. 또한 이미지를 비동기식으로 업로드하려고 하므로 fileInput 구성 요소를 다음과 같이 구성할 수 있습니다

<?= $form->field($model, &#39;image[]&#39;)->label($label)->widget(FileInput::classname(), [
  // &#39;name&#39; => &#39;ImgSelect&#39;,
  &#39;language&#39; => &#39;zh-CN&#39;, 
  &#39;options&#39; => [&#39;multiple&#39; => true, &#39;accept&#39; => &#39;image/*&#39;], 
  &#39;pluginOptions&#39; => [ 
    &#39;initialPreview&#39; => $initialPreview, 
    &#39;initialPreviewConfig&#39; => $initialPreviewConfig, 
    &#39;allowedPreviewTypes&#39; => [&#39;image&#39;], 
    &#39;allowedFileExtensions&#39; => [&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;], 
    &#39;previewFileType&#39; => &#39;image&#39;, 
    &#39;overwriteInitial&#39; => false, 
    &#39;browseLabel&#39; => &#39;选择图片&#39;,
    &#39;msgFilesTooMany&#39; => "选择上传的图片数量({n}) 超过允许的最大图片数{m}！", 
    &#39;maxFileCount&#39; => 5,//允许上传最多的图片5张 
    &#39;maxFileSize&#39; => 2048,//限制图片最大200kB 
    &#39;uploadUrl&#39; => Url::to([&#39;/upload/image&#39;]),
    //&#39;uploadExtraData&#39; => [&#39;testid&#39; => &#39;listimg&#39;], 
    &#39;uploadAsync&#39; => true,//配置异步上传还是同步上传 
  ],
  &#39;pluginEvents&#39; => [ 
    &#39;filepredelete&#39; => "function(event, key) { 
        return (!confirm(&#39;确认要删除&#39;)); 
      }", 
    &#39;fileuploaded&#39; => &#39;function(event, data, previewId, index) { 
        $(event.currentTarget.closest("form")).append(data.response.imgfile);
      }&#39;, 
    &#39;filedeleted&#39; => &#39;function(event, key) { 
        $(event.currentTarget.closest("form")).find("#"+key).remove(); 
        return;
      }&#39;, 
  ]
]); ?>

컨트롤러에서 이미지 검색 구성을 구성하고 이를 전달합니다. 업로드/이미지 컨트롤러에 비동기 업로드 URL이 구성되어 있는 것을 확인할 수 있으며, 삭제, 업로드 및 기타 작업이 완료되면 js도 추가한 것을 확인할 수 있습니다.

위에서 언급했듯이 FileInput 구성 요소의 몇 가지 기본 속성과 설정이 나열되어 있습니다. 필요한 경우 속성에 대한 자세한 설명을 보려면 문서를 확인하세요.

이미지를 업로드하는 컨트롤러에 actionImage 함수를 어떻게 작성하는지 보세요

/** 
  * 上传图片到临时目录 
  * @return string 
  * @throws \yii\base\Exception 
  */ 
 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 = [&#39;error&#39; => &#39;图片最大不可超过2M&#39;]; 
           return json_encode($res); 
         } 
         if (!in_array(strtolower($image->extension), array(&#39;gif&#39;, &#39;jpg&#39;, &#39;jpeg&#39;, &#39;png&#39;))) { 
           $res = [&#39;error&#39; => &#39;请上传标准图片文件, 支持gif,jpg,png和jpeg.&#39;]; 
           return json_encode($res); 
         } 
         $dir = &#39;/uploads/temp/&#39;; 
         //生成唯一uuid用来保存到服务器上图片名称 
         $pickey = ToolExtend::genuuid(); 
         $filename = $pickey . &#39;.&#39; . $image->getExtension();
         //如果文件夹不存在，则新建文件夹 
         if (!file_exists(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir)) { 
           FileHelper::createDirectory(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir, 777); 
         } 
         $filepath = realpath(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir) . &#39;/&#39;; 
         $file = $filepath . $filename; 
         if ($image->saveAs($file)) { 
           $imgpath = $dir . $filename; 
           /*Image::thumbnail($file, 100, 100) 
             ->save($file . &#39;_100x100.jpg&#39;, [&#39;quality&#39; => 80]); 
*/ 
          //  array_push($initialPreview, "<img src=&#39;" . $imgpath . "&#39; class=&#39;file-preview-image&#39; alt=&#39;" . $filename . "&#39; title=&#39;" . $filename . "&#39;>"); 
           $config = [ 
             &#39;caption&#39; => $filename, 
             &#39;width&#39; => &#39;120px&#39;, 
             &#39;url&#39; => &#39;../upload/delete&#39;, // server delete action 
             &#39;key&#39; => $pickey,
             &#39;extra&#39; => [&#39;filename&#39; => $filename] 
           ];
           array_push($initialPreviewConfig, $config); 
           $res = [ 
             "initialPreview" => $initialPreview, 
             "initialPreviewConfig" => $initialPreviewConfig, 
             "imgfile" => "<input name=&#39;image[]&#39; id=&#39;" . $pickey . "&#39; type=&#39;hidden&#39; value=&#39;" . $imgpath . "&#39;/>",
             &#39;filename&#39; => $filename,
             &#39;imagePath&#39; => $imgpath,
           ]; 
         }
       } 
     } 
     return json_encode($res); 
   } 
 }

이제 여러 이미지를 업로드하는 작업을 완벽하게 구현했습니다.

사진 삭제 효과를 얻으려면 먼저 두 장의 사진을 업로드할 수 있습니다. 단일 이미지 또는 여러 이미지를 업로드할 수 있습니다.

업로드가 성공한 후 현재 페이지를 새로 고칠 수 있습니다. 처음부터 컨트롤러에 이미지 미리보기를 구현했기 때문에 업로드한 두 이미지가 표시되어야 합니다.

삭제 기능에 대해서는 언급하지 않겠습니다. 브라우저에서 삭제된 URL을 구성하면 동일한 작업이 수행됩니다.

yii2 다중 이미지 업로드 구성 요소 사용

관련 기사