Ekleme / düzenleme formuna resim form öğesi ekleme

Yönetici listesi ve formu için ui bileşenleri kullanarak Magento 2 için bir CRUD modülü inşa ediyorum ve varlıklarımdan biri görüntü alanı vardır.
Ama olması gerektiği gibi çalışmasını sağlayamıyorum.
İşte nasıl olması gerektiği.
Ekleme modunda veya yüklenen görüntü bulunmayan düzenleme modundayken basit bir dosya girişi gibi görünmelidir.

Bir dosya yüklendiğinde, resim önizlemesini ve altında bir silme kutusunu göstermelidir.

Tam olarak bu tasarımı aramıyorum. Farklı görünebilir, ancak aynı işlevselliğe sahip olabilir.

Magento 1'de bunu sadece kendi blok oluşturucumu oluşturarak başardım

class {{Namespace}}_{{Module}}_Block_Adminhtml_{{Entity}}_Helper_Image extends Varien_Data_Form_Element_Image
{
    protected function _getUrl()
    {
        $url = false;
        if ($this->getValue()) {
            $url = Mage::helper('{{namespace}}_{{module}}/{{entity}}_image')->getImageBaseUrl().$this->getValue();
        }
        return $url;
    }
}

Ve bunu form bloğuma ekleyerek

    $fieldset->addType(
        'image',
        Mage::getConfig()->getBlockClassName('{{namespace}}_{{module}}/adminhtml_{{entity}}_helper_image')
    );

Ama Magento 2'de hiçbir form bloğu yok
. Ui bileşenleri dosyasındaki form alanı için bir sınıf adı kullanabileceğimi biliyorum

    <field name="image" class="Class\Name\Here">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Resume</item>
                <item name="formElement" xsi:type="string">image</item>
                <item name="source" xsi:type="string">[entity]</item>
                <item name="dataScope" xsi:type="string">image</item>
            </item>
        </argument>
    </field>

Açıkçası bu sınıfı yaratmak zorundayım, ama neyi genişletmeliyim?
Tek bildiğim arayüzü uygulamak zorunda olduğum Magento\Framework\View\Element\UiComponentInterfaceama genişletebileceğim hiçbir şey bulamadım.
Yani asıl sorum şu: İstenilen davranışı elde etmek için bir sınıfı genişletebilir miyim? Değilse, bu öğe oluşturucuyu oluşturmaya nasıl başlayabilirim?

Ben alana bağlı bir sınıf gerektirmeden bunu yapmak için bir yol buldum. Yani form öğesine bağlı bir sınıf var ama oluşturucu olarak değil.
Sütun şu şekilde tanımlanmalıdır:

<field name="image">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="source" xsi:type="string">[entity]</item>
            <item name="label" xsi:type="string" translate="true">Image</item>
            <item name="visible" xsi:type="boolean">true</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">[Namespace]_[Module]/image-preview</item>
            <item name="required" xsi:type="boolean">false</item>
            <item name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="url" path="[namespace_module]/[entity]_image/upload"/>
            </item>
        </item>
    </argument>
</field>

Ayrıca başvurulan önizleme şablonu dosyasını oluşturmam gerekiyordu [Namespace]_[Module]/image-preview.
Şöyle app/code/[Namespace]/[Module]/view/adminhtml/web/template/image-preview.htmlgörünüyor:

<div class="file-uploader-summary">
    <div class="file-uploader-preview">
        <a attr="href: $parent.getFilePreview($file)" target="_blank">
            <img
                class="preview-image"
                tabindex="0"
                event="load: $parent.onPreviewLoad.bind($parent)"
                attr="
                    src: $parent.getFilePreview($file),
                    alt: $file.name">
        </a>

        <div class="actions">
            <button
                type="button"
                class="action-remove"
                data-role="delete-button"
                attr="title: $t('Delete image')"
                click="$parent.removeFile.bind($parent, $file)">
                <span translate="'Delete image'"/>
            </button>
        </div>
    </div>

    <div class="file-uploader-filename" text="$file.name"/>
    <div class="file-uploader-meta">
        <text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>
    </div>
</div>

Bu kod şöyle bir alan oluşturur:

Bir resim yükledikten sonra (gerçek zamanlı) şöyle görünür:

İçindeki url öğe uploaderConfig, yüklendiğinde resmin gönderildiği URL'dir. Ben de bunu oluşturmak gerekiyordu:

namespace [Namespace]\[Module]\Controller\Adminhtml\[Entity]\Image;

use Magento\Framework\Controller\ResultFactory;

/**
 * Class Upload
 */
class Upload extends \Magento\Backend\App\Action
{
    /**
     * Image uploader
     *
     * @var \[Namespace]\[Module]\Model\ImageUploader
     */
    protected $imageUploader;

    /**
     * @param \Magento\Backend\App\Action\Context $context
     * @param \[Namespace]\[Module]\Model\ImageUploader $imageUploader
     */
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \[Namespace]\[Module]\Model\ImageUploader $imageUploader
    ) {
        parent::__construct($context);
        $this->imageUploader = $imageUploader;
    }

    /**
     * Check admin permissions for this controller
     *
     * @return boolean
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('[Namespace]_[Module]::[entity]');
    }

    /**
     * Upload file controller action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        try {
            $result = $this->imageUploader->saveFileToTmpDir('image');

            $result['cookie'] = [
                'name' => $this->_getSession()->getName(),
                'value' => $this->_getSession()->getSessionId(),
                'lifetime' => $this->_getSession()->getCookieLifetime(),
                'path' => $this->_getSession()->getCookiePath(),
                'domain' => $this->_getSession()->getCookieDomain(),
            ];
        } catch (\Exception $e) {
            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
        }
        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
    }
}

Bu sınıf [Namespace]\[Module]\Model\ImageUploaderbuna benzer bir örnek kullanır \Magento\Catalog\Model\ImageUploader.

Bu işe yaradı. Hala görüntü db kaydetmek sorunları var ama bu tamamen farklı bir sorun.
Ben imagevarlık kategorisinde ilham kaynağı olarak kullandım

Evet, genişletmeniz gereken sınıf \Magento\Ui\Component\Form\Element\AbstractElement.

Bu sınıf, ElementInterfacekendisinden UiComponentInterfacebahsettiğiniz şeyi kendisi uygular .

Bunun da ötesinde, beyan edilen bileşenleri kontrol Magento\Ui\Component\Form\Elementederseniz, hepsinin bu sınıfı genişlettiğini görebilirsiniz.

Çünkü bu sınıf tercih etmesinin sebebi de bu renderyöntemi \Magento\Backend\Block\Widget\Form\Renderer\Elementancak böyle sınıf türünü kabul etmektedir:(Bu aslında Magento\Framework\Data\Form\Element\AbstractElementkabul edilen bir örnektir , değil \Magento\Ui\Component\Form\Element\AbstractElement)