如何在 Magento 2 UI 表单中创建图像上传器

上传文件是每个开发人员在使用 UI 表单时都会遇到的流行过程。虽然它很受欢迎，但这个过程比看起来要复杂得多。因此，在今天来自 Magenest 的技术指南文章中，我们将逐步指导您如何在 Magento 2 UI 表单中创建图像上传器。 

在 UI 表单中创建图片上传器的步骤

第 1 步：添加字段 UI 表单 

让我们在您的 UI 表单 XML 文件中添加一个字段来呈现图像上传器。请注意，您需要如下定义 formElement、elementTmpl、previewTmpl、uploaderConfig 配置，以确保图像上传器可以正确显示。

<field name="logo">
   <argument name="data" xsi:type="array">
       <item name="config" xsi:type="array">
           <item name="dataType" xsi:type="string">string</item>
           <item name="label" xsi:type="string" translate="true">Logo</item>
           <item name="formElement" xsi:type="string">fileUploader</item>
           <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
           <item name="previewTmpl" xsi:type="string">ui/form/element/uploader/preview</item>
           <item name="sortOrder" xsi:type="number">10</item>
           <item name="required" xsi:type="boolean">true</item>
           <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png svg</item>
           <item name="uploaderConfig" xsi:type="array">
               <item name="url" xsi:type="url" path="magenest_upload/index/upload"/>
           </item>
           <item name="notice" xsi:type="string"><![CDATA[Allowed file types:jpg, jpeg, png.]]></item>
       </item>
   </argument>
</field>

第 2 步：创建 ImageUploader 模型

创建一个模型 ImageUploader 来处理您的上传逻辑，例如从请求正文在临时目录中创建文件，将文件从临时目录复制到目标文件夹。

Magenest / ImageUpload / Model / ImageUploader

<?php
namespace Magenest\ImageUpload\Model;
...
class ImageUploader extends \Magento\Catalog\Model\ImageUploader {
public function __construct(
   Database $coreFileStorageDatabase,
   Filesystem $filesystem,
   UploaderFactory $uploaderFactory,
   StoreManagerInterface $storeManager,
   LoggerInterface $logger, $baseTmpPath,
   $basePath,
   $allowedExtensions,
   $allowedMimeTypes = [],
   Name $fileNameLookup = null)
{
   parent::__construct($coreFileStorageDatabase, $filesystem, $uploaderFactory, $storeManager, $logger, $baseTmpPath, $basePath, $allowedExtensions, $allowedMimeTypes, $fileNameLookup);
}
//todo: for later logic override use
...
}

第三步：创建控制器上传图片

当您上传图片时，控制器将响应 使用 ImageUploader 模型将您的图片移动到目标目录。

Magenest / ImageUpload / Controller / Adminhtml / Index / Upload

 public function __construct(
       Context $context, 
       \Magenest\ImageUpload\Model\ImageUploader $imageUploader
   ){
       $this->imageUploader = $imageUploader;
       parent::__construct($context);
   }
   public function execute()
   {
       $imageId = $this->_request->getParam('param_name', 'image');

       try {
           $result = $this->imageUploader->saveFileToTmpDir($imageId);
       } catch (Exception $e) {
           $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
       }
       return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
   }

第 4 步：使用依赖注入配置 ImageUploader 和 Upload 控制器构造函数

现在在 di.xml 中添加您的配置。这些配置包括上传基本路径和上传图片上传的基本临时路径。类型名称将是您的上传控制器。

现在在Magenest/ImageUpload/etc/di.xml中添加配置

<type name="Magenest\ImageUpload\TestImageUpload"> 
   <arguments> 
       <argument name="baseTmpPath" xsi:type="string">test/tmp</argument> 
       <argument name="basePath" xsi:type="string ">test</argument> 
   </arguments> 
</type>

检查结果

如果所有步骤都已完成，请清除缓存并查看您的 UI 表单以查看结果。

现在客户端可以将图像上传到文件系统。但是，要将图像从 tmpl 文件夹移动到所需文件夹以及保存文件路径以供进一步处理，您需要在 UI 表单的操作保存中添加一些脚本： 

Magenest / ImageUpload / Controller / Adminhtml / Index / Save

if ($data) 
{
           if (isset($data['logo'][0]['name']) && isset($data['logo'][0]['tmp_name'])) {
               $data['image'] =$data['logo'][0]['name'];
               /** @var \Magenest\ImageUpload\Model\ImageUploader $this->imageUploader */
               $this->imageUploader->moveFileFromTmp($data['image']);
           } elseif (isset($data['logo'][0]['image']) && !isset($data['logo'][0]['tmp_name'])) {
               $data['image'] = $data['logo'][0]['image'];
           } else {
               $data['image'] = null;
           }
}