Cách tái tạo tải lên hình ảnh phụ trợ Magento 2 ở lối vào

15

Trong Magento 2 có một trình tải lên hình ảnh duy nhất trông như thế này:

nhập mô tả hình ảnh ở đây

nó tải lên hình ảnh bằng AJAX và sẽ trả về tuần tự JSON chứa thông tin hình ảnh được tải lên. Có cách nào để tạo lại chức năng này trong tệp phtml frontend không?

magento2  file-upload 
— Idham Choudry
nguồn
Tôi đã không thử điều này nhưng bạn có thể kiểm tra mô-đun quản trị tương tự để có ý tưởng thực hiện ở giao diện người dùng.
— Jai

Câu trả lời:

2

Bạn có thể tạo tiện ích mở rộng tùy chỉnh (đặt tên tiện ích mở rộng tùy chỉnh là "Vendor_MyModule") để tải lên hình ảnh Front-end.

Tôi giả sử bạn đã tạo tiện ích mở rộng tùy chỉnh "Vendor_MyModule". Vì vậy, tôi chỉ mô tả ở đây chỉ các tệp cần thiết liên quan đến hoạt động tải lên hình ảnh.

Vui lòng làm theo các bước dưới đây.

Bước 1: Tạo tệp mô hình tải lên. ứng dụng / mã / Nhà cung cấp / MyMocule / Model / Upload / ImageFileUploader.php

Tập tin: ImageFileUploader.php

<?php
namespace  Vendor\MyModule\Model\Upload;

use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\Filesystem;
use Magento\MediaStorage\Model\File\UploaderFactory;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\UrlInterface;
use Magento\Store\Model\StoreManagerInterface;

/**
 * Class ImageFileUploader
 * @package Aheadworks\Rbslider\Model\Slide
 */
class ImageFileUploader
{
    /**
     * @var UploaderFactory
     */
    private $uploaderFactory;

    /**
     * @var Filesystem
     */
    private $filesystem;

    /**
     * @var StoreManagerInterface
     */
    private $storeManager;

    /**
     * @var string
     */
    const FILE_DIR = 'vendor_mymodule/uplaods';

    /**
     * @param UploaderFactory $uploaderFactory
     * @param Filesystem $filesystem
     * @param StoreManagerInterface $storeManager
     */
    public function __construct(
        UploaderFactory $uploaderFactory,
        Filesystem $filesystem,
        StoreManagerInterface $storeManager
    ) {
        $this->uploaderFactory = $uploaderFactory;
        $this->storeManager = $storeManager;
        $this->filesystem = $filesystem;
    }

    /**
     * Save file to temp media directory
     *
     * @param string $fileId
     * @return array
     * @throws LocalizedException
     */
    public function saveImageToMediaFolder($fileId)
    {
        try {
            $result = ['file' => '', 'size' => ''];
            /** @var \Magento\Framework\Filesystem\Directory\Read $mediaDirectory */
            $mediaDirectory = $this->filesystem
                ->getDirectoryRead(DirectoryList::MEDIA)
                ->getAbsolutePath(self::FILE_DIR);
            /** @var \Magento\MediaStorage\Model\File\Uploader $uploader */
            $uploader = $this->uploaderFactory->create(['fileId' => $fileId]);
            $uploader->setAllowRenameFiles(true);
            $uploader->setFilesDispersion(false);
            $uploader->setAllowedExtensions($this->getAllowedExtensions());
            $result = array_intersect_key($uploader->save($mediaDirectory), $result);

            $result['url'] = $this->getMediaUrl($result['file']);
        } catch (\Exception $e) {
            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
        }
        return $result;
    }

    /**
     * Get file url
     *
     * @param string $file
     * @return string
     */
    public function getMediaUrl($file)
    {
        $file = ltrim(str_replace('\\', '/', $file), '/');
        return $this->storeManager
            ->getStore()
            ->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . self::FILE_DIR . '/' . $file;
    }

    /**
     * Get allowed file extensions
     *
     * @return string[]
     */
    public function getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'gif', 'png'];
    }
}

Bước 2: Tạo Trình điều khiển để tải lên hình ảnh bằng Mô hình được tạo trong setp 1

/app/code/Vendor/MyModule/Contoder/Index/UploadImage.php

Tập tin: UploadImage.php 

namespace  Vendor\MyModule\Controller\Index;


use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\ResultFactory;
use Vendor\MyModule\Model\Upload\ImageFileUploader;

class UploadImage extends \Magento\Framework\App\Action\Action
{


    /**
     * @var ImageFileUploader
     */
    private $imageFileUploader;

    /**
    * @var \Magento\Store\Model\StoreManagerInterface
    */
    protected $storeManager;


    /**
     * @param Context $context
     * @param ImageFileUploader $imageFileUploader
     */
    public function __construct(
        Context $context,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        ImageFileUploader $imageFileUploader

    ) {
        $this->storeManager        = $storeManager;       
        $this->imageFileUploader = $imageFileUploader;
        parent::__construct($context);

    }

    /**
     * Image upload action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {        
        $result = $this->imageFileUploader->saveImageToMediaFolder('myimgaeupload');
        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
    }
}

Bước 3: Tạo một bộ điều khiển khác để tải ứng dụng bố trí / mã / Nhà cung cấp / MuModule / Trình điều khiển / Index / Index.php

Tập tin: Index.php

namespace Vendor\MyModule\Controller\Index;


class Index extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
    \Magento\Framework\View\Result\PageFactory $pageFactory)
        {
        $this->_pageFactory = $pageFactory;
         return parent::__construct($context);
    }

    public function execute()
    {




    $resultPage = $this->_pageFactory->create(); 
   return $resultPage; 
}

}

Bước 4: Khai báo bộ định tuyến cho bộ điều khiển phông chữ của bạn. ứng dụng / mã / Nhà cung cấp / MyModule / etc / frontend / Rout.xml

Tập tin: Rout.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="*myupload*" frontName="*myupload*">
            <module name="Vendor_MyModule" />
        </route>
    </router>
</config>

bước 5: Khai báo layout.xml /app/code/Vendor/MyModule//view/frontend/layout/myupload_index_index.xml

Tệp: myupload_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">             
             <block class="Vendor\MyModule\Block\Myblock" name="myupload_index_index" template="Vendor_MyModule::form.phtml" />
        </referenceContainer>       
    </body>
</page>

Bước 6: Tạo tệp lớp khối /app/code/Vendor/MyModule/Block/Myblock.php

Tập tin: Myblock.php

<?php

namespace Vendor\MyModule\Block;


class Myblock  extends \Magento\Framework\View\Element\Template
{


}

Bước 7: tạo tập tin phtml

/app/code/Vendor/MyModule/view/frontend/temsheet/form.phtml

Tập tin: form.phtml

<h2>Welcome to Ny Image Uploader</h2>
<div class="upload-wrapper" data-bind="scope: 'uploader'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>


<script type="text/x-magento-init">
{
   ".upload-wrapper": {
       "Magento_Ui/js/core/app": {
           "components": {
               "uploader": {                   
                   "component":"Magento_Ui/js/form/element/file-uploader",                   
                   "template": "ui/form/element/uploader/uploader",                   
                   "previewTmpl":"Vendor_MyModule/checkout-image-preview",
                   "dataScope" : "myimgaeupload",
                   "uploaderConfig": {
                        "url": "<?php echo $block->getUrl('myupload/index/uploadimage'); ?>"
                   }
               }
           }
       }
   }
}

</script>

Bước 8: tạo tệp mẫu KO cho ứng dụng xem trước hình ảnh / mã / Nhà cung cấp / MyModule / view / frontend / web / template / image-preview.html

Tệp: 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>

Bước 9) Chạy các lệnh CLI

sudo php bin/magento setup:di:compile
sudo rm -rf pub/static/frontend/*
sydo php bin/magento cache:flush

nhập mô tả hình ảnh ở đây

— Thông tin Pritam 24
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.