การเพิ่มองค์ประกอบของรูปแบบภาพไปยังฟอร์มเพิ่ม / แก้ไข

ฉันกำลังสร้างโมดูล CRUD สำหรับ Magento 2 โดยใช้ส่วนประกอบ UI สำหรับรายการผู้ดูแลระบบและรูปแบบและหนึ่งในหน่วยงานของฉันมีฟิลด์รูปภาพ
แต่ฉันไม่สามารถทำงานได้ตามที่ควร
นี่คือวิธีการทำงาน
เมื่ออยู่ในโหมดเพิ่มหรือในโหมดแก้ไขที่ไม่มีภาพที่อัปโหลดควรมีรูปแบบการป้อนไฟล์แบบง่าย

เมื่ออัปโหลดไฟล์แล้วควรแสดงตัวอย่างภาพและกล่องลบด้านล่าง

ฉันไม่ได้มองหาการออกแบบนี้อย่างแน่นอน มันอาจดูแตกต่าง แต่มีฟังก์ชั่นเหมือนกัน

ใน Magento 1 ฉันสามารถทำสิ่งนี้ได้เพียงสร้างตัวบล็อกบล็อคของตัวเอง

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;
    }
}

และเพิ่มสิ่งนี้ในบล็อกของฉัน

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

แต่ฉันไม่มี form block ใน Magento 2
ฉันรู้ว่าฉันสามารถใช้ชื่อคลาสสำหรับฟิลด์ฟอร์มในไฟล์คอมโพเนนต์ ui

    <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>

เห็นได้ชัดว่าฉันต้องสร้างชั้นนี้ แต่สิ่งที่ฉันควรขยาย
สิ่งที่ฉันรู้คือฉันต้องใช้ส่วนต่อประสานMagento\Framework\View\Element\UiComponentInterfaceแต่ฉันไม่พบสิ่งใดที่ฉันสามารถขยายได้
ดังนั้นคำถามที่แท้จริงของฉันคือ: ฉันสามารถขยายชั้นเรียนเพื่อให้บรรลุพฤติกรรมที่ต้องการได้หรือไม่? ถ้าไม่ใช่ฉันจะเริ่มสร้างตัวสร้างองค์ประกอบนี้ได้อย่างไร

ฉันพบวิธีที่จะทำโดยไม่ต้องมีคลาสที่แนบกับฟิลด์ ฉันหมายถึงมีคลาสที่แนบกับอิลิเมนต์แบบฟอร์ม แต่ไม่เป็นตัวแสดง
คอลัมน์ควรถูกกำหนดดังนี้:

<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>

[Namespace]_[Module]/image-previewฉันยังจำเป็นในการสร้างไฟล์ภาพตัวอย่างแม่แบบอ้างอิงโดย
นั่นคือapp/code/[Namespace]/[Module]/view/adminhtml/web/template/image-preview.htmlลักษณะเช่นนี้:

<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>

รหัสนี้จะสร้างเขตข้อมูลเช่นนี้:

หลังจากอัปโหลดภาพ (ตามเวลาจริง) ดูเหมือนว่า:

url รายการภายในuploaderConfigคือ URL ที่ภาพจะถูกโพสต์เมื่ออัปโหลด ดังนั้นฉันต้องการสร้างสิ่งนี้ด้วย:

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);
    }
}

ชั้นนี้จะใช้เป็นตัวอย่างของที่คล้ายกับ [Namespace]\[Module]\Model\ImageUploader\Magento\Catalog\Model\ImageUploader

ตะเข็บนี้ใช้งานได้ ฉันยังมีปัญหาในการบันทึกภาพในฐานข้อมูล แต่นั่นเป็นปัญหาที่แตกต่างกันโดยสิ้นเชิง
ฉันใช้เป็นแรงบันดาลใจในimageฟิลด์สำหรับกลุ่มหมวดหมู่

\Magento\Ui\Component\Form\Element\AbstractElementใช่ชั้นเรียนที่คุณควรขยายเป็น

ชั้นเรียนนี้ใช้ส่วนElementInterfaceขยายที่UiComponentInterfaceคุณอ้างถึง

ยิ่งไปกว่านั้นถ้าคุณตรวจสอบส่วนประกอบที่ประกาศภายใต้Magento\Ui\Component\Form\Elementคุณจะเห็นว่าพวกมันขยายคลาสนั้นทั้งหมด

เหตุผลที่ฉันจะเลือกชั้นเรียนนี้เป็นเพราะrenderวิธีการ\Magento\Backend\Block\Widget\Form\Renderer\Elementรับเฉพาะชั้นเรียนประเภทนี้เท่านั้น:(นี่เป็นตัวอย่างMagento\Framework\Data\Form\Element\AbstractElementที่ยอมรับได้จริง\Magento\Ui\Component\Form\Element\AbstractElement)