Magento 2、画像選択パラメーターを備えた新しいウィジェット、画像を保存しない


18

新しいウィジェットを作成し、パラメーターの1つは画像選択ツール です。このコードを使用ます。すべてがうまく見えます。メディアフォルダを開いて、使用する画像を選択できます。画像を選択すると、フォームの画像フィールドに次の値が入力されます。

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

しかし、フォームウィジェットデータを保存すると、ピクチャフィールドには次の値があります。 {{media url=

これ以上何もない。どうすればこれを解決できますか?


2
問題は構成にありました。[構成]> [全般]> [コンテンツ管理]で、[カタログにWYSIWYGのメディアコンテンツに静的URLを使用する]「はい」にする必要があります
-mvistas

1
このアプローチの問題は、ハードコーディングされたイメージが機能しないため、あるenvから別のenvに移動する際に問題が発生することです
-open-ecommerce.org

回答:


1

画像をアップロードする場合は、画像選択ボタンを使用しないのはなぜですか?
エディターが気に入ったらそれを使用しますが、エディターを使用して画像をアップロードするのは適切な方法ではありません。代わりにボタンを使用できます。方法がわからない場合。説明させてください。

これが私のコードです。以下のコードは、ボタンを作成するブロックファイルに記述されています。

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

画像はデータベースのフィールド名です。あなたの場合、それはwysiwygエディターです。正確なことはわかりませんが、一度データベースをチェックインしてください。

以下のコードは、テーブルに画像を保存するために使用されます。次に、このコードをコントローラーに配置します。

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

}

その後、result..soのためにphtmlで呼び出して、phtmlファイルにコードを記述します。
これがコードです。

    $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()は私のblock.soに書き込みます。それに従って、ブロックファイルとして適用する必要があります。
これがあなたのお役に立てば幸いです。質問がある場合はお知らせください。


私はオブジェクトマネージャを使用してphtmlファイルの結果を呼び出しましたが、それは適切な方法ではありませんが、ここではこれ以上コードを書きたくないので、それを使用する理由です。ファクトリメソッドを使用したい場合はうまくいきます。
ヴィシュヌサランケ

0

コードを確認しましたが、ディレクトリから画像URLを取得するためのコードが含まれていないことがわかりました。この問題を解決するには、それに取り組む必要があります。画像のURLを含めるコードがありません。




0

jqueryを使用して、画像をフォルダーに保存できます。

スクリプトで、このコードを書きます

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

次に、カスタムコントローラーで:

クラスアップロードは\ 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";
    }
}

}

アップロードした画像をmagento2のフォルダーに保存する方法を参照してください

オブザーバーを使用すると、post..inputフィールドタグでdata-form-part = "product_form"の画像の値を取得できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.