Magento 2, nuevo widget con parámetro de selección de imagen, no guarda la imagen


18

Creo un nuevo widget y uno de los parámetros es un selector de imagen, solo uso este código. Todo se ve bien. Puedo abrir la carpeta multimedia y elegir la imagen que quiero usar. Cuando elijo la imagen, el campo de imagen en el formulario se llena con este valor:

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

Pero cuando guardo los datos del widget de formulario, el campo de imagen tiene este valor: {{media url=

nada mas. ¿Como puedo resolver esto?


2
El problema estaba en la configuración. En Configuración> General> Gestión de contenido, "Usar URL estáticas para contenido multimedia en WYSIWYG para catálogo" Debería ser "sí"
mvistas

1
El problema con este enfoque es que te encontrarás con problemas para pasar de un entorno a otro, ya que la imagen codificada no funcionará
open-ecommerce.org

Respuestas:


1

Si desea cargar una imagen, ¿por qué no utiliza el botón de selección de imagen?
Si le gusta el editor, úselo. Pero no es una forma adecuada de cargar una imagen usando un editor. En su lugar, puede usar el botón. Si no sabes cómo hacerlo. Dejame explicar.

Aquí está mi código. El siguiente código está escrito en un archivo de bloque que crea un botón.

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

La imagen es el nombre del campo de la base de datos. En su caso, es el editor wysiwyg. No sé exactamente, pero una vez verifique su base de datos.

El siguiente código se utiliza para guardar la imagen en su tabla. Ahora ponga este código en su controlador.

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

}

Después de eso, debe llamarlo en phtml para obtener el resultado ... así que escriba debajo del código en el archivo phtml.
Aquí está el código.

    $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 () está escrito en mi bloque. así que de acuerdo con eso, debe aplicarlo como su archivo de bloque.
Espero que esto te sea útil. Si tiene alguna consulta, hágamelo saber.


Llamé un resultado en un archivo phtml usando el administrador de objetos. No será una forma adecuada, pero no quiero escribir más código aquí. Por eso lo uso. Si desea utilizar el método de fábrica, entonces estará bien.
Vishnu Salunke

0

Revisé el código y descubrí que el código para obtener la URL de la imagen del directorio no está incluido. Tienes que trabajar en ello para resolver este problema. Falta el código para incluir la URL de la imagen.




0

Al usar jquery, podemos guardar la imagen en una carpeta.

En script, escribe este código

<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>

Luego, en su controlador personalizado:

La carga de clases se extiende \ 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";
    }
}

}

consulte ¿Cómo guardar una carga de imagen en una carpeta en magento2?

Y mediante el uso de observador, puede obtener el valor de la imagen en la publicación ... En la etiqueta del campo de entrada, use data-form-part = "product_form".

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.