Magento 2, neues Widget mit Bildauswahl-Parameter, speichert kein Bild


18

Ich erstelle ein neues Widget und einer der Parameter ist eine Bildauswahl. Ich benutze einfach diesen Code. Alles sieht gut aus. Ich kann den Medienordner öffnen und das Bild auswählen, das ich verwenden möchte. Wenn ich das Bild auswähle, wird das Bildfeld auf dem Formular mit diesem Wert gefüllt:

http://local.magento.com/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvcHVycGxlLmpwZyJ9fQ,/key/4c150d984998702b74709bb8f7584998702

Aber wenn ich die Daten des Formular-Widgets speichere, hat das Bildfeld diesen Wert: {{media url=

nichts mehr. Wie kann ich das lösen?


2
Das Problem lag in der Konfiguration. Unter Konfiguration> Allgemein> Inhaltsverwaltung sollte "Statische URLs für Medieninhalte in WYSIWYG für Katalog verwenden" "Ja"
lauten

1
Das Problem bei diesem Ansatz ist, dass Sie auf Probleme
stoßen,

Antworten:


1

Wenn Sie ein Bild hochladen möchten, verwenden Sie die Bildauswahlschaltfläche.
Wenn Sie den Editor mögen, verwenden Sie ihn. Es ist jedoch keine geeignete Methode, um ein Bild mit einem Editor hochzuladen. Sie können stattdessen die Schaltfläche verwenden. Wenn Sie nicht wissen, wie es geht. Lassen Sie mich erklären.

Hier ist mein Code. Der folgende Code wird in eine Blockdatei geschrieben, die eine Schaltfläche erstellt.

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

Bild ist der Datenbankfeldname. In Ihrem Fall ist es Wysiwyg-Editor. Ich weiß nicht genau, aber überprüfen Sie einmal in Ihrer Datenbank.

Der folgende Code wird verwendet, um das Bild in Ihrer Tabelle zu speichern. Tragen Sie diesen Code nun in Ihren Controller ein.

<?php
namespace Vendor\Module\Controller\Adminhtml\Slider;

use Magento\Framework\App\Filesystem\DirectoryList;

class Save extends \Magento\Backend\App\Action

{

protected $_mediaDirectory;
protected $_fileUploaderFactory;

public function __construct(
    \Magento\Backend\App\Action\Context $context,        
    \Magento\Framework\Filesystem $filesystem,
    \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory
) 
{
    $this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
    $this->_fileUploaderFactory = $fileUploaderFactory;
    parent::__construct($context);
}

public function execute()
{
    /*For Image Upload*/

    /** @var \Magento\Framework\Controller\Result\Redirect $resultRedirect */
    $resultRedirect = $this->resultRedirectFactory->create();

    try{
        $target = $this->_mediaDirectory->getAbsolutePath('imagefolder/');

        $targetOne = "imagefolder/";
        /** @var $uploader \Magento\MediaStorage\Model\File\Uploader */
        $uploader = $this->_fileUploaderFactory->create(['fileId' => 'image']);
        /** Allowed extension types */
        $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png', 'zip', 'doc']);
        /** rename file name if already exists */
        $uploader->setAllowRenameFiles(true);
        /** upload file in folder "mycustomfolder" */
        $result = $uploader->save($target);
        /*If file found then display message*/
        if ($result['file']) 
        {
            $this->messageManager->addSuccess(__('File has been successfully uploaded')); 
        }
    }
    catch (Exception $e) 
    {
        $this->messageManager->addError($e->getMessage());
    }
    /*For Image Upload Finished*/ 

    $data = $this->getRequest()->getPostValue();

    $data['image'] = $targetOne.$result['file'];

    if (!$data) {
        $this->_redirect('*/*/filenaem');
        return;
    }
    try {

        $rowData = $this->_objectManager->create('Vendor\Module\Model\Slider');

        $rowData->setData($data);

        if (isset($data['id'])) 
        {
            $rowData->setEntityId($data['id']);
        }
        $rowData->save();
        $this->messageManager->addSuccess(__('Row data has been successfully saved.'));
    } 
    catch (Exception $e) 
    {
        $this->messageManager->addError(__($e->getMessage()));
    }
    $this->_redirect('*/*/index');

    return $this->resultRedirectFactory->create()->setPath(
        '*/*/upload', ['_secure'=>$this->getRequest()->isSecure()]
    );
}

/**
 * Check Category Map permission.
 *
 * @return bool
 */
protected function _isAllowed()
{
    return $this->_authorization->isAllowed('Vendor_Module::Module_list');
}

}

Danach möchten Sie es in phtml für das Ergebnis aufrufen. So schreiben Sie den folgenden Code in die phtml-Datei.
Hier ist Code.

    $collection = $block->getCollectionFor();
    $_objectManager = \Magento\Framework\App\ObjectManager::getInstance(); //instance of\Magento\Framework\App\ObjectManager
    $storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface'); 
    $currentStore = $storeManager->getStore();
//Base URL for saving image into database.
    $mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

getCollectionFor () wird in meine block.so geschrieben, dass du das als deine block-Datei anwenden solltest.
Ich hoffe das ist hilfreich für dich. Wenn Sie Fragen haben, lassen Sie es mich wissen.


Ich habe ein Ergebnis in einer Phtml-Datei mit dem Objekt-Manager aufgerufen. Es ist kein richtiger Weg, aber ich möchte hier keinen weiteren Code schreiben. Deshalb verwende ich es. Wenn Sie die Factory-Methode verwenden möchten, ist dies in Ordnung.
Vishnu Salunke

0

Ich habe den Code überprüft und festgestellt, dass der Code zum Abrufen der Bild-URL aus dem Verzeichnis nicht enthalten ist. Sie müssen daran arbeiten, um dieses Problem zu lösen. Der Code zum Einfügen der Bild-URL fehlt.




0

Mit jquery können wir das Bild in einem Ordner speichern.

Schreiben Sie diesen Code im Skript

<script>
    function file_up(id)
    {
        var up_id = 'uploadfiles'+id;
        var upremv_id = 'upload'+id;
        var files = document.getElementById(up_id).files;
        for (var i = 0; i < files.length; i++)
        {
            uploadFile(files[i],up_id,upremv_id);
        }
    }
    function uploadFile(file,up_id,upremv_id){
        var url = "<?php echo $baseurl ?>helloworld/index/upload";
        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                jQuery('#imgna'+up_id).val(xhr.responseText);
                console.log(xhr.responseText); // handle response.
                jQuery('#'+up_id).remove();
                jQuery('#'+upremv_id).remove();
                var img_va = '<img class="image" src="<?php echo $mediaUrl.'custom/'?>'+xhr.responseText+'">';
                jQuery('#pre'+up_id).html(img_va);
            }
        };
        fd.append('uploaded_file', file);

</script>

Dann in Ihrem benutzerdefinierten Controller:

Klassen-Upload erweitert \ Magento \ Framework \ App \ Action \ Action {

public function __construct(\Magento\Framework\App\Action\Context $context)
{
    parent::__construct($context);
}

public function execute()
{
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();

    $fileSystem = $objectManager->create('\Magento\Framework\Filesystem');
    $mediaPath = $fileSystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA)->getAbsolutePath();
    $media = $mediaPath . 'custom/';

    //  exit;


    $file_name = rand() . $_FILES['uploaded_file']['name'];
    $file_size = $_FILES['uploaded_file']['size'];
    $file_tmp = $_FILES['uploaded_file']['tmp_name'];
    $file_type = $_FILES['uploaded_file']['type'];

    if (move_uploaded_file($file_tmp, $media . $file_name)) {
        echo $file_name;
    } else {
        echo "File was not uploaded";
    }
}

}

siehe Wie ein Hochladen von Bildern in einem Ordner in magento2 retten?

Und wenn Sie Observer verwenden, können Sie den Wert des Bildes nachträglich ermitteln. Verwenden Sie im Eingabefeld Tag data-form-part = "product_form".

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.