Magento2: Admin-Modul Bild-Upload-Code zur Anzeige des Formulars

7

Ich habe ein benutzerdefiniertes Magento2-Administratormodul mit Bild-Upload-Funktion. Ich möchte ein Bild vom Administrator hochladen. Welcher Code für das Anzeigebildfeld in angewendet werden soll, Bild hochladen, auch Bildanzeige in Bearbeitungsaktion.

Vielen Dank

Dateipfad : 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();
    } 
Suresh Chikani
quelle
Das von darshanbhavsar.wordpress.com/2015/02/11/magento-2-custom-module entwickelte Modul bietet alles, was Sie suchen.
Imran Zahoor

Antworten:

18

Sie müssen eine Klasse erstellen, um Ihr Bild-Upload-Feld zu verarbeiten und das Bild nach dem Hochladen anzuzeigen.

Also [Namespace]\[Module]\Block\Adminhtml\[Entity]\Helper\ImageKlasse schaffen

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

Erstellen Sie dann die Klasse, mit der Sie den Bild-Upload-Pfad und das Upload-Verzeichnis abrufen können

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

_prepareFormFügen Sie dies jetzt in Ihrer Registerkarte "Bearbeiten für" direkt nach dem Deklarieren des Feldsatzes in die Methode ein

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

und fügen Sie Ihr Bildfeld so hinzu

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

In dem Controller, der Ihre Entität speichert, müssen Sie die folgenden Klassen in den Konstruktor einfügen

Magento\MediaStorage\Model\File\UploaderFactory und [Namespace]\[Module]\Model\[Entity]\Image

Lassen Sie Ihre Klasse so aussehen

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

Fügen Sie dies nun im selben Controller hinzu, bevor Sie aufrufen $[entity]->save()

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

und erstellen Sie diese Methode:

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

Ein vollständiges Beispiel zum Erstellen einer Entität, die das Hochladen von Bildern und Dateien unterstützt (etwas anders als hier beschrieben, da es eine zusätzliche Klasse zum Hochladen enthält) finden Sie hier

Marius
quelle
gegebene URL-Erweiterung funktioniert nicht. Es wird ein Fehler in der Bildschirmausnahme 'Magento \ Framework \ Exception \ LocalizedException' mit der Meldung 'Quellklasse "\ Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ Collection" für "Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \" ausgegeben CollectionFactory "Generation existiert nicht."
Suresh Chikani
@ SHPatel. Löschen Sie den Inhalt von var / generator. Wenn dieses Problem weiterhin besteht, kann dies aus zwei Gründen auftreten. Sie haben entweder nicht die neueste Version von Magento 2 oder meine Erweiterung funktioniert nicht mit der neuesten Version. Wenn das Problem meine Erweiterung ist, werde ich es überprüfen, wenn ich etwas Zeit habe.
Marius
@Marius, wie können wir ein solches Bild auch in einem adminhtml GridAbschnitt anzeigen ? Im Moment ist Standard Magento 2 zeigt es für Product Grid.
Praful Rajput
@PrafulRajput. Ich konnte diesen Teil noch nicht überprüfen. Ich habe keine Ahnung, wie es gemacht wird.
Marius
@marius das funktioniert in RC 2. Eine Sache, die Sie erwähnen, ist das Hinzufügen von $ fieldset-> addType ('image', '[Namespace] [Module] \ Adminhtml [Entity] \ Helper \ Image'); Ich bin mir ziemlich sicher, dass Ihnen ein "Block" -Zeichen fehlt. [Namespace] [Modul] \ Block \ Adminhtml [Entität] \ Helper \ Image
Eirik
3

Das Admin-Modul für grundlegende Nachrichten zum Hinzufügen / Aktualisieren finden Sie hier . Wenn Sie nach einer einfachen Lösung zum Hochladen von Bildern suchen, sehen Sie sich den folgenden Ausschnitt aus dem Link an .

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);
}
Imran Zahoor
quelle
_Dateisystem nicht definded :(
Fudu
Wenn wir es gefunden haben, müssen wir es hinzufügen, um zu funktionieren. Erstellen Sie es auch in der Funktion construct () und verwenden Sie \ Magento \ Framework \ Filesystem.
Fudu
Ersetzen Sie _filesystem durch $ this -> _ objectManager-> get ('Magento \ Framework \ Filesystem')
divya sekar
@divyasekar Kannst du bitte diese Frage beantworten? -> magento.stackexchange.com/questions/287175/…
Kowsigan Atsayam
1

Sie können ein Bildfeld in der _prepareForm () -Methode Ihres Administrationsformulars hinzufügen:

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

  );
Chandresh P.
quelle
1
@chanresh Bildfeld hinzugefügt fertig, aber ich muss die Bildvorschau auf dem Formular anzeigen.
Suresh Chikani
1
Wenn Sie ein Bild hochladen und den Datensatz speichern, wird neben dem Eingabefeld "Datei auswählen" eine kleine Miniaturansicht angezeigt.
Chandresh P.
1
Ich habe ein Uplode-Bild und speichere es, aber das Miniaturbild kann nicht angezeigt werden.
Suresh Chikani
Bitte fügen Sie Ihr Code-Snippet für _prepareForm () hinzu.
Chandresh P.
Überprüfen Sie meine Frage, Frage mit _prepareForm () aktualisiert.
Suresh Chikani