Image Magento2如何在管理cms中添加图像上传器字段
如何在管理员cms页面中添加图像加载程序字段Image Magento2如何在管理cms中添加图像上传器字段,image,content-management-system,admin,magento2,Image,Content Management System,Admin,Magento2,如何在管理员cms页面中添加图像加载程序字段 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Magento\Cms\Controller\
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Cms\Controller\Adminhtml\Page\Save" type="[Vendor]\[Module]\Controller\Adminhtml\Cms\Page\Save" />
<preference for="Magento\Cms\Model\Page\DataProvider" type="[Vendor]\[Module]\Model\Cms\Page\DataProvider" />
</config>
<field name="page_image">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">page</item>
<item name="label" xsi:type="string" translate="true">Page Image</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
<item name="required" xsi:type="boolean">false</item>
<item name="sortOrder" xsi:type="number">40</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="catalog/category_image/upload"/>
</item>
</item>
</argument>
</field>
一串
页
页面图像
真的
文件上传器
ui/form/element/uploader/uploader
Magento_目录/图像预览
假的
40
已在cms_页面表中创建页面_图像字段。上传图像时显示图像预览。但如何保存图像（数据库和服务器）以及如何在编辑模式下显示上传的图像 首先，您必须创建自己的模块，以覆盖cms页面的保存操作和数据提供程序。 如果您不知道如何创建模块，请参考此链接 创建模块后，请执行以下步骤： 第1步。在cms_页面表格中添加自定义图像列 在[Vendor][Module]\Setup下创建InstallScema.php。您的文件位置将是[Vendor][Module]\Setup\InstallSchema.php
namespace [Vendor]\[Module]\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Ddl\Table;
class InstallSchema implements InstallSchemaInterface
{
public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
$connection = $installer->getConnection();
$connection->addColumn('cms_page','your_image_field_name',['type' =>\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,'comment' => 'Your Image Field Name']);
$installer->endSetup();
}
}
namespace [Vendor]\[Module]\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Ddl\Table;
class InstallSchema implements InstallSchemaInterface
{
public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
$connection = $installer->getConnection();
$connection->addColumn('cms_page','your_image_field_name',['type' =>\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,'comment' => 'Your Image Field Name']);
$installer->endSetup();
}
}
php bin/magento cache:flush;
php bin/magento setup:upgrade;
php bin/magento setup:di:compile;
rm -rf var/generation/* var/di/* var/cache/* var/page_cache/* ;
rm -rf pub/static/frontend pub/static/_requirejs pub/static/adminhtml ;
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="content">
<field name="your_image_field_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">category</item>
<item name="label" xsi:type="string" translate="true">Your image field Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="required" xsi:type="boolean">false</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="[module]/cms_heroimage/upload"/>
</item>
</item>
</argument>
</field>
</fieldset>
</form>
use Magento\Framework\Controller\ResultFactory;
class Upload extends \Magento\Backend\App\Action
{
/**
* Image uploader
*
* @var \[Namespace]\[Module]\Model\ImageUploader
*/
protected $imageUploader;
/**
* @param \Magento\Backend\App\Action\Context $context
* @param \Magento\Catalog\Model\ImageUploader $imageUploader
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Catalog\Model\ImageUploader $imageUploader
) {
parent::__construct($context);
$this->imageUploader = $imageUploader;
}
/**
* Upload file controller action
*
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
try {
$result = $this->imageUploader->saveFileToTmpDir('your_image_field_name');
$result['cookie'] = [
'name' => $this->_getSession()->getName(),
'value' => $this->_getSession()->getSessionId(),
'lifetime' => $this->_getSession()->getCookieLifetime(),
'path' => $this->_getSession()->getCookiePath(),
'domain' => $this->_getSession()->getCookieDomain(),
];
} catch (\Exception $e) {
$result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
}
return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
}
}
?>
use Magento\Backend\App\Action;
use Magento\Cms\Model\Page;
use Magento\Framework\App\Request\DataPersistorInterface;
use Magento\Framework\Exception\LocalizedException;
class Save extends \Magento\Cms\Controller\Adminhtml\Page\Save
{
/**
* Authorization level of a basic admin session
*
* @see _isAllowed()
*/
const ADMIN_RESOURCE = 'Magento_Cms::save';
/**
* @var PostDataProcessor
*/
protected $dataProcessor;
/**
* @var DataPersistorInterface
*/
protected $dataPersistor;
/**
* Save action
*
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
$data = $this->getRequest()->getPostValue();
/** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
$resultRedirect = $this->resultRedirectFactory->create();
if ($data) {
$data = $this->dataProcessor->filter($data);
if (isset($data['is_active']) && $data['is_active'] === 'true') {
$data['is_active'] = Page::STATUS_ENABLED;
}
if (empty($data['page_id'])) {
$data['page_id'] = null;
}
/** @var \Magento\Cms\Model\Page $model */
$model = $this->_objectManager->create('Magento\Cms\Model\Page');
$id = $this->getRequest()->getParam('page_id');
if ($id) {
$model->load($id);
}
// Add custom image field to data
if(isset($data['your_image_field_name']) && is_array($data['your_image_field_name'])){
$data['your_image_field_name']=$data['your_image_field_name'][0]['name'];
}
$model->setData($data);
$this->_eventManager->dispatch(
'cms_page_prepare_save',
['page' => $model, 'request' => $this->getRequest()]
);
if (!$this->dataProcessor->validate($data)) {
return $resultRedirect->setPath('*/*/edit', ['page_id' => $model->getId(), '_current' => true]);
}
try {
$model->save();
$this->messageManager->addSuccess(__('You saved the page.'));
$this->dataPersistor->clear('cms_page');
if ($this->getRequest()->getParam('back')) {
return $resultRedirect->setPath('*/*/edit', ['page_id' => $model->getId(), '_current' => true]);
}
return $resultRedirect->setPath('*/*/');
} catch (LocalizedException $e) {
$this->messageManager->addError($e->getMessage());
} catch (\Exception $e) {
$this->messageManager->addException($e, __('Something went wrong while saving the page.'));
}
$this->dataPersistor->set('cms_page', $data);
return $resultRedirect->setPath('*/*/edit', ['page_id' => $this->getRequest()->getParam('page_id')]);
}
return $resultRedirect->setPath('*/*/');
}
}
?>
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Cms\Controller\Adminhtml\Page\Save" type="[Vendor]\[Module]\Controller\Adminhtml\Cms\Page\Save" />
<preference for="Magento\Cms\Model\Page\DataProvider" type="[Vendor]\[Module]\Model\Cms\Page\DataProvider" />
</config>
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace [Vendor]\Module\Model\Cms\Page;
use Magento\Cms\Model\ResourceModel\Page\CollectionFactory;
use Magento\Framework\App\Request\DataPersistorInterface;
/**
* Class DataProvider
*/
class DataProvider extends \Magento\Cms\Model\Page\DataProvider
{
/**
* Get data
*
* @return array
*/
public function getData()
{
if (isset($this->loadedData)) {
return $this->loadedData;
}
$items = $this->collection->getItems();
/** @var $page \Magento\Cms\Model\Page */
foreach ($items as $page) {
$this->loadedData[$page->getId()] = $page->getData();
}
$data = $this->dataPersistor->get('cms_page');
if (!empty($data)) {
$page = $this->collection->getNewEmptyItem();
$page->setData($data);
$this->loadedData[$page->getId()] = $page->getData();
$this->dataPersistor->clear('cms_page');
}
/* For Modify You custom image field data */
if(!empty($this->loadedData[$page->getId()]['your_image_field_name'])){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $objectManager->get('Magento\Store\Model\StoreManagerInterface');
$currentStore = $storeManager->getStore();
$media_url=$currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
$image_name=$this->loadedData[$page->getId()]['your_image_field_name'];
unset($this->loadedData[$page->getId()]['your_image_field_name']);
$this->loadedData[$page->getId()]['your_image_field_name'][0]['name']=$image_name;
$this->loadedData[$page->getId()]['your_image_field_name'][0]['url']=$media_url."cms/hero/tmp/".$image_name;
}
return $this->loadedData;
}
}
首先，您必须创建自己的模块，以覆盖cms页面的保存操作和数据提供程序。
如果您不知道如何创建模块，请参考此链接
创建模块后，请执行以下步骤：
第1步。在cms_页面表格中添加自定义图像列
在[Vendor][Module]\Setup下创建InstallScema.php。您的文件位置将是[Vendor][Module]\Setup\InstallSchema.php
namespace [Vendor]\[Module]\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Ddl\Table;
class InstallSchema implements InstallSchemaInterface
{
public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
$connection = $installer->getConnection();
$connection->addColumn('cms_page','your_image_field_name',['type' =>\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,'comment' => 'Your Image Field Name']);
$installer->endSetup();
}
}
如果您的模块已激活，请从设置模块表中删除您的模块
创建InstallSchema.php后，打开终端并点击以下命令。它将向数据库表中添加列并清除缓存
namespace [Vendor]\[Module]\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Ddl\Table;
class InstallSchema implements InstallSchemaInterface
{
public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
$connection = $installer->getConnection();
$connection->addColumn('cms_page','your_image_field_name',['type' =>\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,'comment' => 'Your Image Field Name']);
$installer->endSetup();
}
}
php bin/magento cache:flush;
php bin/magento setup:upgrade;
php bin/magento setup:di:compile;
rm -rf var/generation/* var/di/* var/cache/* var/page_cache/* ;
rm -rf pub/static/frontend pub/static/_requirejs pub/static/adminhtml ;
第2步。添加图像字段
在[Vendor]/[Mdoule]/View/adminhtml/ui\u组件下创建cms\u page\u form.xml。您的文件位置将是[Vendor]/[Mdoule]/View/adminhtml/ui\u component/cms\u page\u form.xml。
添加以下代码
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="content">
<field name="your_image_field_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">category</item>
<item name="label" xsi:type="string" translate="true">Your image field Name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="required" xsi:type="boolean">false</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="[module]/cms_heroimage/upload"/>
</item>
</item>
</argument>
</field>
</fieldset>
</form>
use Magento\Framework\Controller\ResultFactory;
class Upload extends \Magento\Backend\App\Action
{
/**
* Image uploader
*
* @var \[Namespace]\[Module]\Model\ImageUploader
*/
protected $imageUploader;
/**
* @param \Magento\Backend\App\Action\Context $context
* @param \Magento\Catalog\Model\ImageUploader $imageUploader
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Catalog\Model\ImageUploader $imageUploader
) {
parent::__construct($context);
$this->imageUploader = $imageUploader;
}
/**
* Upload file controller action
*
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
try {
$result = $this->imageUploader->saveFileToTmpDir('your_image_field_name');
$result['cookie'] = [
'name' => $this->_getSession()->getName(),
'value' => $this->_getSession()->getSessionId(),
'lifetime' => $this->_getSession()->getCookieLifetime(),
'path' => $this->_getSession()->getCookiePath(),
'domain' => $this->_getSession()->getCookieDomain(),
];
} catch (\Exception $e) {
$result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
}
return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
}
}
?>
use Magento\Backend\App\Action;
use Magento\Cms\Model\Page;
use Magento\Framework\App\Request\DataPersistorInterface;
use Magento\Framework\Exception\LocalizedException;
class Save extends \Magento\Cms\Controller\Adminhtml\Page\Save
{
/**
* Authorization level of a basic admin session
*
* @see _isAllowed()
*/
const ADMIN_RESOURCE = 'Magento_Cms::save';
/**
* @var PostDataProcessor
*/
protected $dataProcessor;
/**
* @var DataPersistorInterface
*/
protected $dataPersistor;
/**
* Save action
*
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
$data = $this->getRequest()->getPostValue();
/** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
$resultRedirect = $this->resultRedirectFactory->create();
if ($data) {
$data = $this->dataProcessor->filter($data);
if (isset($data['is_active']) && $data['is_active'] === 'true') {
$data['is_active'] = Page::STATUS_ENABLED;
}
if (empty($data['page_id'])) {
$data['page_id'] = null;
}
/** @var \Magento\Cms\Model\Page $model */
$model = $this->_objectManager->create('Magento\Cms\Model\Page');
$id = $this->getRequest()->getParam('page_id');
if ($id) {
$model->load($id);
}
// Add custom image field to data
if(isset($data['your_image_field_name']) && is_array($data['your_image_field_name'])){
$data['your_image_field_name']=$data['your_image_field_name'][0]['name'];
}
$model->setData($data);
$this->_eventManager->dispatch(
'cms_page_prepare_save',
['page' => $model, 'request' => $this->getRequest()]
);
if (!$this->dataProcessor->validate($data)) {
return $resultRedirect->setPath('*/*/edit', ['page_id' => $model->getId(), '_current' => true]);
}
try {
$model->save();
$this->messageManager->addSuccess(__('You saved the page.'));
$this->dataPersistor->clear('cms_page');
if ($this->getRequest()->getParam('back')) {
return $resultRedirect->setPath('*/*/edit', ['page_id' => $model->getId(), '_current' => true]);
}
return $resultRedirect->setPath('*/*/');
} catch (LocalizedException $e) {
$this->messageManager->addError($e->getMessage());
} catch (\Exception $e) {
$this->messageManager->addException($e, __('Something went wrong while saving the page.'));
}
$this->dataPersistor->set('cms_page', $data);
return $resultRedirect->setPath('*/*/edit', ['page_id' => $this->getRequest()->getParam('page_id')]);
}
return $resultRedirect->setPath('*/*/');
}
}
?>
第4步。覆盖保存操作。
在[Vendor][Module]\etc\adminhtml下创建di.xml。您的文件位置将是[Vendor][Module]\etc\adminhtml\di.xml
添加以下行以覆盖cms页面的保存操作和数据提供程序
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Cms\Controller\Adminhtml\Page\Save" type="[Vendor]\[Module]\Controller\Adminhtml\Cms\Page\Save" />
<preference for="Magento\Cms\Model\Page\DataProvider" type="[Vendor]\[Module]\Model\Cms\Page\DataProvider" />
</config>
第6步。创建DataProvider.php
在[Vendor]\Module\Model\Cms\Page下创建DataProvider.php。您的文件位置将是[Vendor]\Module\Model\Cms\Page\DataProvider.php
<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace [Vendor]\Module\Model\Cms\Page;
use Magento\Cms\Model\ResourceModel\Page\CollectionFactory;
use Magento\Framework\App\Request\DataPersistorInterface;
/**
* Class DataProvider
*/
class DataProvider extends \Magento\Cms\Model\Page\DataProvider
{
/**
* Get data
*
* @return array
*/
public function getData()
{
if (isset($this->loadedData)) {
return $this->loadedData;
}
$items = $this->collection->getItems();
/** @var $page \Magento\Cms\Model\Page */
foreach ($items as $page) {
$this->loadedData[$page->getId()] = $page->getData();
}
$data = $this->dataPersistor->get('cms_page');
if (!empty($data)) {
$page = $this->collection->getNewEmptyItem();
$page->setData($data);
$this->loadedData[$page->getId()] = $page->getData();
$this->dataPersistor->clear('cms_page');
}
/* For Modify You custom image field data */
if(!empty($this->loadedData[$page->getId()]['your_image_field_name'])){
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $objectManager->get('Magento\Store\Model\StoreManagerInterface');
$currentStore = $storeManager->getStore();
$media_url=$currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
$image_name=$this->loadedData[$page->getId()]['your_image_field_name'];
unset($this->loadedData[$page->getId()]['your_image_field_name']);
$this->loadedData[$page->getId()]['your_image_field_name'][0]['name']=$image_name;
$this->loadedData[$page->getId()]['your_image_field_name'][0]['url']=$media_url."cms/hero/tmp/".$image_name;
}
return $this->loadedData;
}
}
谢谢你，纳宾！我只有一个问题，在DataProvider.php中，您指定了cms/hero/tmp/
作为文件的位置。我的文件在/media/
根目录中结束。我宁愿看到它们最终出现在/media/cms/hero/tmp/
而不是媒体根目录中。有什么想法吗？编辑：使用Magento 2.2.2下面的代码将为您提供媒体文件夹的路径<代码>$media\u url=$currentStore->getBaseUrl（\Magento\Framework\url接口：：url\u TYPE\u media）
如果您不想在媒体文件夹中使用任何自定义文件夹，只需替换此行$this->loadedData[$page->getId（）]['your_image\u field\u name'][0]['url']=$media\u url..cms/hero/tmp/“$image\u name$this->loadedData[$page->getId（）]['your\u image\u field\u name'][0]['url']=$media\u url.$image\u namecms/hero/tmp/
作为文件的位置。我的文件在/media/
根目录中结束。我宁愿看到它们最终出现在/media/cms/hero/tmp/
而不是媒体根目录中。有什么想法吗？编辑：使用Magento 2.2.2下面的代码将为您提供媒体文件夹的路径<代码>$media\u url=$currentStore->getBaseUrl（\Magento\Framework\url接口：：url\u TYPE\u media）$this->loadedData[$page->getId（）]['your_image\u field\u name'][0]['url']=$media\u url..cms/hero/tmp/“$image\u name$this->loadedData[$page->getId（）]['your\u image\u field\u name'][0]['url']=$media\u url.$image\u name