magento 2 cách tải lên hình ảnh và video trong mô-đun tùy chỉnh

Tôi đang sử dụng magento 2.1

Tôi cần tải lên nhiều hình ảnh và video bằng thành phần ui

Giống như magento-admin -> sản phẩm -> caralog -> sản phẩm

tôi cần làm gì để đạt được điều này?

magento2 image-upload

— Deexit Sanghani
nguồn

Vẫn M2 sử dụng mã kiểu cũ cho 'Hình ảnh và Video' mà không có UI_Component? Có phải bạn cần điều này?

— Sohel Rana

Câu trả lời:

Cuối cùng tôi đã có câu trả lời.

Tôi giới thiệu mô-đun này và thực hiện trong mô-đun tùy chỉnh của mình

Tìm mã hữu ích dưới đây:

làm theo các bước dưới đây

1) tạo layout.xml

[vendor]/[module]/operation/view/adminhtml/layout/layout_edit.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
            <referenceContainer name="content">
                <uiComponent name="sample_form"/>
            </referenceContainer>
            <referenceContainer name="sample_form">
                <block name="gallery" class="[vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery">
                    <arguments>
                        <argument name="config" xsi:type="array">
                            <item name="label" xsi:type="string" translate="true">Images</item>
                            <item name="collapsible" xsi:type="boolean">true</item>
                            <item name="opened" xsi:type="boolean">false</item>
                            <item name="sortOrder" xsi:type="string">22</item>
                            <item name="canShow" xsi:type="boolean">true</item>
                            <item name="componentType" xsi:type="string">fieldset</item>
                        </argument>
                    </arguments>
                    <block class="[vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery\Content" as="content" template="[vendor]_[[module]::helper/gallery.phtml">
                        <arguments>
                            <argument name="config" xsi:type="array">
                                <item name="parentComponent" xsi:type="string">sample_form.sample_form.block_gallery.block_gallery</item>

                            </argument>
                        </arguments>

                    </block>
                </block>
            </referenceContainer>

    </body>
</page>

2) Tạo khối trợ giúp

[vendor]/[module]/Block/Adminhtml/Grid/Helper/Form/Gallery.php

namespace [vendor]\[module]\Block\Adminhtml\Grid\Helper\Form;

use Magento\Framework\Registry;
use Magento\Catalog\Model\Product;
use Magento\Eav\Model\Entity\Attribute;
use Magento\Catalog\Api\Data\ProductInterface;

class Gallery extends \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery
{
    /**
     * @var here you set your ui form 
     */
    protected $formName = 'sample_form';

}

3) Tạo khối biểu mẫu trợ giúp

[vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery\Content.php

namespace [vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery;

use Magento\Framework\Data\Form\Element\AbstractElement;
use Magento\Backend\Block\Media\Uploader;
use Magento\Framework\View\Element\AbstractBlock;
use Magento\Framework\App\Filesystem\DirectoryList;

class Content extends \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content
{


    protected function _prepareLayout()
    {
        $this->addChild('uploader', 'Magento\Backend\Block\Media\Uploader');

        $a = $this->getUploader()->getConfig()->setUrl(
            $this->_urlBuilder->addSessionParam()->getUrl('[vendor]/grid_gallery/upload')/* here set you upload Controller */
        )->setFileField(
            'image'
        )->setFilters(
            [
                'images' => [
                    'label' => __('Images (.gif, .jpg, .png)'),
                    'files' => ['*.gif', '*.jpg', '*.jpeg', '*.png'],
                ],
            ]
        );

    }


    public function getImageTypes()
    {
        return '[]';
    }

    public function getMediaAttributes()
    {
        return '[]';
    }

}

Lưu ý : - bạn nên mở rộng đúng cách trên cả hai khối

4) Tạo mẫu

Bạn nên sao chép mẫu gallery.phtml vendor/magento/module-product-video/view/adminhtml/templates/helper/gallery.phtml và sửa đổi nó theo yêu cầu của bạn và dịch hại trong mô-đun của bạn[vendor]/[module]/view/adminhtml/templates/helper/gallery.phtml

Xin vui lòng cho tôi biết trong nhận xét nếu bạn cần bất kỳ sự giúp đỡ

— Deexit Sanghani
nguồn

tôi đang gặp lỗi vì tài liệu DOM MỤC phải được tạo

— vijay b

@vijayb bạn có thể vui lòng đặt lỗi này ở đây không

— Deexit Sanghani

docs.google.com/document/d/ Kẻ

— vijay b

@vijayb Tôi hy vọng bạn làm việc trên mẫu ui vì vậy hãy đặt ở đây tên mẫu ui của bạnprotected $formName = 'your_ui_form

— Deexit Sanghani

tôi đã làm theo từng bước chính xác như được giải thích trong answer.do chúng ta phải tạo bất kỳ tập tin nào khác để xác định Thành phần Ui đó ??

— vijay b

Để thêm video trong Magento 2, bạn phải làm theo các bước sau:

Tạo khóa API Youtube.
Tích hợp khóa API Youtube để
Magento 2. Tích hợp URL Video Youtube vào Sản phẩm.

— Syed Muneeb Ul Hasan
nguồn

Câu trả lời từ Deexit Sanghani có thể đã lỗi thời vì tôi đang sử dụng magento2.2.2 v và vị trí cho xml din không hoạt động đối với tôi [vendor]/[module]/operation/view/adminhtml/layout/layout_edit.xmlnhưng mọi thứ khác cũng được bình chọn đúng. Và đây là những gì làm việc cho tôi hãy xem ../vendor/magento/module-product-video/view/adminhtml/ui_component/product_form.xmlvà trong vị trí mô-đun của bạn: ../app/code/[vendor]/[module]/view/adminhtml/ui_component/your_ layout_edit.xmltrong <form></form>add:

    <htmlContent name="gallery" sortOrder="22">
        <argument name="data" xsi:type="array">
            <item name="wrapper" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">My Custom Images And Videos</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">false</item>
            </item>
        </argument>
        <settings>
            <wrapper>
                <canShow>true</canShow>
                <componentType>fieldset</componentType>
            </wrapper>
        </settings>
        <block name="gallery" class="[vendor]\[module]\Block\Adminhtml\[Entity]\Helper\Form\Gallery">
            <!--<arguments>
                <argument name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Images And Videos</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="string">22</item>
                    <item name="canShow" xsi:type="boolean">true</item>
                    <item name="componentType" xsi:type="string">fieldset</item>
                </argument>
            </arguments>-->
            <block class="[vendor]\[module]\Block\Adminhtml\[Entity]\Helper\Form\Gallery\Content" as="content">
                <arguments>
                    <argument name="config" xsi:type="array">
                        <item name="parentComponent" xsi:type="string">ui_component_form.ui_component_form.block_gallery.block_gallery</item>
                    </argument>
                </arguments>
                <block class="Magento\ProductVideo\Block\Adminhtml\Product\Edit\NewVideo" name="new-video" template="Magento_ProductVideo::product/edit/slideout/form.phtml"/>
            </block>
        </block>
    </htmlContent>

Tôi có quản lý để upload hình ảnh vai trò add tùy chỉnh vv .. nhưng không tiết kiệm trong cơ sở dữ liệu chưa chống lại liên tiếp, LƯU Ý: Nó cần nhiều sự chú ý để làm cho nó hoạt động cho nhu cầu của bạn, ghi đè yêu cầu của bạn ví dụ như gallery.pthml, getImagesJson(), getImageTypes(), getMediaAttributesphương pháp vv .. . và sau đó nó cần chặt chẽ phù hợp với cấu trúc cơ sở dữ liệu theo mô hình tương tự hoặc tương tự với Magento mẹ đẻ bảng look: catalog_product_entity_media_gallery_value, catalog_product_entity_media_gallery, catalog_product_entity_media_gallery_valuevv ... chưa từng làm việc trên video chưa!

Mong rằng sẽ giúp được ai đó!

— Juliano Vargas
nguồn