Magento2:フォームを表示するための管理モジュール画像アップロードコード


7

画像アップロード機能を備えたmagento2 adminカスタムモジュールがあります。管理者から画像をアップロードしたい。from、アップロード画像、編集アクションでの画像表示の表示画像フィールドに適用するコード。

ありがとう

ファイルパス : app\code\[Vendor]\[Module]\Block\Adminhtml\Emp\Edit\Tab\Main.php

    /**
     * Prepare form
     *
     * @return $this
     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
    */
    protected function _prepareForm()
    {
        $model = $this->_coreRegistry->registry('emp_post');

        $isElementDisabled = false;

        /** @var \Magento\Framework\Data\Form $form */
        $form = $this->_formFactory->create();

        $form->setHtmlIdPrefix('page_');

        $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Employee Information')]);

        if ($model->getId()) {
            $fieldset->addField('customer_id', 'hidden', ['name' => 'customer_id']);
        }

        $fieldset->addField(
            'firstname',
            'text',
            [
                'name' => 'firstname',
                'label' => __('First Name'),
                'title' => __('First Name'),
                'required' => true,
                'disabled' => $isElementDisabled,
                'value' =>'abc'
            ]
        );

        $fieldset->addField(
            'lastname',
            'text',
            [
                'name' => 'lastname',
                'label' => __('Last Name'),
                'title' => __('Last Name'),
                'required' => true,
                'disabled' => $isElementDisabled,
                'value' =>'abc'
            ]
        );

        $fieldset->addField(
            'email',
            'text',
            [
                'name' => 'email',
                'label' => __('Email Address'),
                'title' => __('Email Address'),
                'required' => true,
                'disabled' => $isElementDisabled,
                'value' =>'abc'
            ]
        );


        $fieldset->addField(
            'image',
            'image',
            array(
                'name' => 'image',
                'label' => __('Image'),
                'title' => __('Image')
            )
        );

        $fieldset->addField(
            'telephone',
            'text',
            [
                'name' => 'telephone',
                'label' => __('Telephone'),
                'title' => __('Telephone'),
                'required' => true,
                'disabled' => $isElementDisabled,
                'value' =>'abc'
            ]
        );

        $dateFormat = $this->_localeDate->getDateFormat(
            \IntlDateFormatter::SHORT
        );

        $fieldset->addField(
            'dob',
            'date',
            [
                'name' => 'dob',
                'label' => __('Date of birth'),
                'date_format' => $dateFormat,
                'disabled' => $isElementDisabled,
                'class' => 'validate-date validate-date-range date-range-custom_theme-from'
            ]
        );

        $fieldset->addField(
            'is_active',
            'select',
            [
                'label' => __('Status'),
                'title' => __('Status'),
                'name' => 'is_active',
                'required' => true,
                'options' => $this->_status->getOptionArray(),
                'disabled' => $isElementDisabled
            ]
        );
        if (!$model->getId()) {
            $model->setData('is_active', $isElementDisabled ? '0' : '1');
        }


        if($model->getData('image')){
            $model->setData('image','learning/images'.$model->getData('image'));
        }

        $form->setValues($model->getData());
        $this->setForm($form);

        return parent::_prepareForm();
    } 

開発されたモジュールdarshanbhavsar.wordpress.com/2015/02/11/magento-2-custom-moduleは、探しているすべてのものを備えているように見えます。
Imran Zahoor 16年

回答:


18

画像のアップロードフィールドを処理し、アップロードされた画像を表示するクラスを作成する必要があります。

[Namespace]\[Module]\Block\Adminhtml\[Entity]\Helper\Imageクラスを作成する

<?php
namespace [Namespace]\[Module]\Block\Adminhtml\[Entity]\Helper;
use Magento\Framework\Data\Form\Element\Image as ImageField;
use Magento\Framework\Data\Form\Element\Factory as ElementFactory;
use Magento\Framework\Data\Form\Element\CollectionFactory as ElementCollectionFactory;
use Magento\Framework\Escaper;
use [Namespace]\[Module]\Model\[Entity]\Image as [Entity]Image;
use Magento\Framework\UrlInterface;

/**
 * @method string getValue()
 */
class Image extends ImageField
{
    /**
     * image model
     *
     * @var \[Namespace]\[Module]\Model\[Entity]\Image
     */
    protected $imageModel;

    /**
     * @param [Entity]Image $imageModel
     * @param ElementFactory $factoryElement
     * @param ElementCollectionFactory $factoryCollection
     * @param Escaper $escaper
     * @param UrlInterface $urlBuilder
     * @param array $data
     */
    public function __construct(
        [Entity]Image $imageModel,
        ElementFactory $factoryElement,
        ElementCollectionFactory $factoryCollection,
        Escaper $escaper,
        UrlInterface $urlBuilder,
        $data = []
    )
    {
        $this->imageModel = $imageModel;
        parent::__construct($factoryElement, $factoryCollection, $escaper, $urlBuilder, $data);
    }
    /**
     * Get image preview url
     *
     * @return string
     */
    protected function _getUrl()
    {
        $url = false;
        if ($this->getValue()) {
            $url = $this->imageModel->getBaseUrl().$this->getValue();
        }
        return $url;
    }
}

次に、画像のアップロードパスとアップロードディレクトリを取得するのに役立つクラスを作成します。

<?php
namespace [Namespace]\[Module]\Model\[Entity];
use Magento\Framework\UrlInterface;
use Magento\Framework\Filesystem;
use Magento\Framework\App\Filesystem\DirectoryList;
class Image
{
    /**
     * media sub folder
     * @var string
     */
    protected $subDir = '[namespace]/[module]/[entity]';
    /**
     * url builder
     *
     * @var \Magento\Framework\UrlInterface
     */
    protected $urlBuilder;
    /**
     * @var \Magento\Framework\Filesystem
     */
    protected $fileSystem;
    /**
     * @param UrlInterface $urlBuilder
     * @param Filesystem $fileSystem
     */
    public function __construct(
        UrlInterface $urlBuilder,
        Filesystem $fileSystem
    )
    {
        $this->urlBuilder = $urlBuilder;
        $this->fileSystem = $fileSystem;
    }
    /**
     * get images base url
     *
     * @return string
     */
    public function getBaseUrl()
    {
        return $this->urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]).$this->subDir.'/image';
    }
    /**
     * get base image dir
     *
     * @return string
     */
    public function getBaseDir()
    {
        return $this->fileSystem->getDirectoryWrite(DirectoryList::MEDIA)->getAbsolutePath($this->subDir.'/image');
    }
}

タブの編集で_prepareForm、フィールドセットを宣言した直後にこれをメソッドに追加します

$fieldset->addType('image', '\[Namespace]\[Module]\Block\Adminhtml\[Entity]\Helper\Image');

このように画像フィールドを追加します

$fieldset->addField(
    'image_field_name',
    'image',
    [
        'name'        => 'image_field_name',
        'label'       => __('Image field Label'),
        'title'       => __('Image field Label'),
    ]
);

エンティティを保存するコントローラーで、コンストラクターに次のクラスを注入する必要があります

Magento\MediaStorage\Model\File\UploaderFactory そして [Namespace]\[Module]\Model\[Entity]\Image

クラスを次のようにします

<?php
use Magento\Framework\Exception\LocalizedException as FrameworkException;

class ....

protected $uploaderFactory;
protected $imageModel;

public function __construct(
    ....
    \Magento\MediaStorage\Model\File\UploaderFactory $uploaderFactory,
    \[Namespace]\[Module]\Model\[Entity]\Image $imageModel,
    ....
){
    ...
    $this->uploaderFactory = $uploaderFactory;
    $this->imageModel = $imageModel;
    ...
}

今、同じコントローラでこれを追加してから、呼び出す前に $[entity]->save()

$imageName = $this->uploadFileAndGetName('image_field_name', $this->imageModel->getBaseDir(), $data);
$[entity]->setImageFieldName($imageName);

このメソッドを作成します。

public function uploadFileAndGetName($input, $destinationFolder, $data)
{
    try {
        if (isset($data[$input]['delete'])) {
            return '';
        } else {
            $uploader = $this->uploaderFactory->create(['fileId' => $input]);
            $uploader->setAllowRenameFiles(true);
            $uploader->setFilesDispersion(true);
            $uploader->setAllowCreateFolders(true);
            $result = $uploader->save($destinationFolder);
            return $result['file'];
        }
    } catch (\Exception $e) {
        if ($e->getCode() != \Magento\Framework\File\Uploader::TMP_NAME_EMPTY) {
            throw new FrameworkException($e->getMessage());
        } else {
            if (isset($data[$input]['value'])) {
                return $data[$input]['value'];
            }
        }
    }
    return '';
}

画像とファイルのアップロードをサポートするエンティティを作成する方法の完全な例(アップロード用の追加クラスが含まれているため、ここで説明されているものとは少し異なります)は、こちらにあります


指定されたURL拡張子が機能していません。「Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \」のメッセージ「ソースクラス「\ Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ Collection」のメッセージとともに画面例外「Magento \ Framework \ Exception \ LocalizedException」でエラーをスローしますCollectionFactory "世代が存在しません。」
Suresh Chikani 2015年

@SHPatel。var / generationの内容を消去します。この問題が解決しない場合は、2つの理由が考えられます。Magento 2の最新バージョンがないか、私の拡張機能が最新バージョンで動作しません。問題が拡張機能である場合は、時間があればチェックします。
マリウス

@Marius、そのような画像をadminhtml Gridセクションにどのように表示できますか?現在、デフォルトのmagento 2がを表示していProduct Gridます。
Praful Rajput

@PrafulRajput。その部分はまだ確認できませんでした。それがどのように行われるのか私にはわかりません。
マリウス

@mariusこれはRC 2で機能します。$ fieldset-> addType( 'image'、 '[Namespace] [Module] \ Adminhtml [Entity] \ Helper \ Image'); 「ブロック」の吹き出しがないと思います。[名前空間] [モジュール] \ Block \ Adminhtml [エンティティ] \ Helper \ Image
Eirik

3

基本的な追加/更新ニュースの管理モジュールはこちらです。簡単な画像アップロードソリューションを探している場合は、リンクから取得した次のスニペットをご覧ください

use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Backend\App\Action;
protected $_fileUploaderFactory;
public function __construct(
    \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,
    Action\Context $context     
) {
    $this->_fileUploaderFactory = $fileUploaderFactory;
    parent::__construct($context);
}
public function execute(){
    $uploader = $this->_fileUploaderFactory->create(['fileId' => 'image']);
    $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
    $uploader->setAllowRenameFiles(false);
    $uploader->setFilesDispersion(false);
    $path = $this->_objectManager->get('Magento\Framework\Filesystem')->getDirectoryRead(DirectoryList::MEDIA)
    ->getAbsolutePath('images/');
    $uploader->save($path);
}

_filesystemが定義されていません:(
fudu

それを見つけたら、これを機能させるために追加する必要があります。また、\ Magento \ Framework \ Filesystemを使用して、construct()関数で作成する必要もあります。
fudu 2018年

_filesystemを$ this-> _ objectManager-> get( 'Magento \ Framework \ Filesystem')で
置き換えます

@divyasekarこの質問に答えてもらえますか?- > magento.stackexchange.com/questions/287175/...
Kowsigan Atsayam

1

管理フォームの_prepareForm()メソッドに画像フィールドを追加できます。

$fieldset->addField(
    'imagefieldname',
    'image',
    array(
        'name' => 'imagefieldname',
        'label' => __('Image'),
        'title' => __('Image')
    )

  );

1
@chanresh画像フィールドを追加しましたが、フォームに画像プレビューを表示する必要があります。
Suresh Chikani

1
画像をアップロードしてレコードを保存すると、[ファイルを選択]入力ファイルフィールドの近くに小さなサムネイルが表示されます。
Chandresh P.

1
アップロードした画像を保存していますが、サムネイル画像を表示できません。
Suresh Chikani 2015年

_prepareForm()のコードスニペットを追加してください。
Chandresh P.

私の質問、_prepareForm()で更新された質問を確認してください。
Suresh Chikani 2015年

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.