Magento 2：在注册和帐户页面上上传客户图像/文件

不二不三发表回复 阅读(12867)

本文介绍了如何在Magento 2的客户注册和客户帐户页面中上传文件或图像。

为此，首先，我们需要添加一个新的客户属性。在此示例中，我们将为客户添加新的图片属性，以便我们可以上传客户图片。

在这里，我们将从模块的安装脚本中创建一个新的客户属性。我们假设模块的名称为Chapagain_CustomerAttribute。

使用安装脚本添加/创建客户属性

在这里，我们使用属性code创建一个customer属性my_customer_image。

文件：app / code / Chapagain / CustomerAttribute / Setup / InstallData.php 

<?php
 
namespace Chapagain\CustomerAttribute\Setup;
 
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Customer\Setup\CustomerSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
 
class InstallData implements InstallDataInterface
{
    /**
     * EAV setup factory
     *
     * @var \Magento\Eav\Setup\EavSetupFactory
     */
    private $eavSetupFactory;
 
    /**
     * Customer setup factory
     *
     * @var CustomerSetupFactory
     */
    private $customerSetupFactory;
 
    /**
     * Constructor
     *
     * @param EavSetupFactory $eavSetupFactory
     * @param CustomerSetupFactory $customerSetupFactory
     */
    public function __construct(
        EavSetupFactory $eavSetupFactory,
        CustomerSetupFactory $customerSetupFactory
    ) 
    {
        $this->eavSetupFactory = $eavSetupFactory;
        $this->customerSetupFactory = $customerSetupFactory;
    }
 
    /**
     * {@inheritdoc}
     */
    public function install(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $setup->startSetup();
 
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);
 
        /**
         * Create a file type attribute
         * For File or Image Upload
         */
        $attributeCode = 'my_customer_image';
 
        $customerSetup->addAttribute(
            \Magento\Customer\Model\Customer::ENTITY, 
            $attributeCode, 
            [
                'type' => 'text',
                'label' => 'My Customer File/Image',
                'input' => 'file',
                'source' => '',
                'required' => false,
                'visible' => true,
                'position' => 200,
                'system' => false,
                'backend' => ''
            ]
        );
        
        // show the attribute in the following forms
        $attribute = $customerSetup
                        ->getEavConfig()
                        ->getAttribute(
                            \Magento\Customer\Model\Customer::ENTITY, 
                            $attributeCode
                        )
                        ->addData(
                            ['used_in_forms' => [
                                'adminhtml_customer',
                                'adminhtml_checkout',
                                'customer_account_create',
                                'customer_account_edit'
                            ]
                        ]);
 
        $attribute->save();
 
        $setup->endSetup();
    }
}

在客户注册页面中添加图像上传字段

为此，您需要创建一个新的XML布局文件和一个新的模板文件。

我们在新创建的XML文件中定义块类和模板文件。

这是XML文件代码：

文件：app / code / Chapagain / CustomerAttribute / view / frontend / layout / customer_account_create.xml 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="form.additional.info">
            <block class="Magento\Framework\View\Element\Template" name="additional_field_register" template="Chapagain_CustomerAttribute::customer/form/additionalfieldregister.phtml"/>
        </referenceContainer>
    </body>
</page>

这是我们在其中添加图像输入字段代码的模板文件代码：

文件：app / code / Chapagain / CustomerAttribute / view / frontend / template / customer / form / additionalfieldregister.phtml 

<fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */
echo __('* Required Fields') ?>">
    <legend class="legend">
        <span>
        <?php 
            /* @escapeNotVerified */ 
            echo __('Additional Information') 
        ?>
        </span>
    </legend>
 
    <p>
        <div class="field my_customer_image ">
            <label for="my_customer_image" class="label"><span><?php /* @escapeNotVerified */
                    echo __('Logo Image') ?></span></label>
            <div class="control">
                <input type="file" name="my_customer_image" id="my_customer_image" title="<?php /* @escapeNotVerified */
                echo __('Logo Image') ?>" class="input-text" data-validate="{required:false}">
            </div>
        </div>
    </p>
</fieldset>

注意：使用上述文件字段上传的图像/文件将存储在pub / media / customer文件夹中。

在客户帐户页面中添加图像上传字段

这是XML文件代码：

文件：app / code / Chapagain / CustomerAttribute / view / frontend / layout / customer_account_edit.xml 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <body>
        <referenceContainer name="form.additional.info">
            <block class="Chapagain\CustomerAttribute\Block\Customer\Account" name="additional_field_account" template="Chapagain_CustomerAttribute::customer/form/additionalfieldaccount.phtml"/>
        </referenceContainer>
    </body>
</page>

如您在上面的XML代码中所见，我们还定义了一个Block类。因此，我们需要创建一个：

文件：app / code / Chapagain / CustomerAttribute / Block / Customer / Account.php 

<?php
namespace Chapagain\CustomerAttribute\Block\Customer;
 
use Magento\Backend\Block\Template\Context;
use Magento\Framework\UrlInterface;
use Magento\Customer\Model\SessionFactory;
 
class Account extends \Magento\Framework\View\Element\Template
{        
    /**
     * @var \Magento\Framework\UrlInterface
     */
    protected $urlBuilder;
 
    /**
     * @var \Magento\Customer\Model\Session
     */
    protected $customerSession;
 
    /**
    * @var \Magento\Store\Model\StoreManagerInterface $storeManager
    */
    protected $storeManager;
 
    /**
     * @var \Magento\Customer\Model\Customer 
     */
    protected $customerModel;
 
    public function __construct(
        Context $context,
        UrlInterface $urlBuilder,
        SessionFactory $customerSession,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Customer\Model\Customer $customerModel,
        array $data = []
    )
    {        
        $this->urlBuilder            = $urlBuilder;
        $this->customerSession       = $customerSession->create();
        $this->storeManager          = $storeManager;
        $this->customerModel         = $customerModel;
 
        parent::__construct($context, $data);
 
        $collection = $this->getContracts();
        $this->setCollection($collection);
    }
 
    public function getBaseUrl()
    {
        return $this->storeManager->getStore()->getBaseUrl();
    }
 
    public function getMediaUrl()
    {
        return $this->getBaseUrl() . 'pub/media/';
    }
 
    public function getCustomerLogoUrl($logoPath)
    {
        return $this->getMediaUrl() . 'customer' . $logoPath;
    }
 
    public function getLogoUrl()
    {
        $customerData = $this->customerModel->load($this->customerSession->getId());
        $logo = $customerData->getData('my_customer_image');
        if (!empty($logo)) {
            return $this->helper->getCustomerLogoUrl($logo);
        }
        return false;
    }
}
?>

这是我们在其中添加图像输入字段代码的模板文件代码：

文件：app / code / Chapagain / CustomerAttribute / view / frontend / template / customer / form / additionalfieldaccount.phtml 

<fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */
echo __('* Required Fields') ?>">
    <legend class="legend">
        <span>
        <?php 
            /* @escapeNotVerified */ 
            echo __('Logo') 
        ?>
        </span>
    </legend>
 
    <p>
        <?php if ($logo = $block->getLogoUrl()): ?>
            <img src="<?php echo $logo ?>" alt="logo" />
        <?php endif; ?>
    </p>
 
     <p>
        <div class="field my_customer_image ">
            <label for="my_customer_image" class="label"><span><?php /* @escapeNotVerified */
                    echo __('Logo Image') ?></span></label>
            <div class="control">
                <input type="file" name="my_customer_image" id="my_customer_image" title="<?php /* @escapeNotVerified */
                echo __('Logo Image') ?>" class="input-text" data-validate="{required:false}">
            </div>
        </div>
    </p>
</fieldset>

希望这可以帮助。谢谢。

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论