新しいウィジェットを作成し、パラメーターの1つは画像選択ツール です。このコードを使用します。すべてがうまく見えます。メディアフォルダを開いて、使用する画像を選択できます。画像を選択すると、フォームの画像フィールドに次の値が入力されます。
しかし、フォームウィジェットデータを保存すると、ピクチャフィールドには次の値があります。
{{media url=
これ以上何もない。どうすればこれを解決できますか?
新しいウィジェットを作成し、パラメーターの1つは画像選択ツール です。このコードを使用します。すべてがうまく見えます。メディアフォルダを開いて、使用する画像を選択できます。画像を選択すると、フォームの画像フィールドに次の値が入力されます。
しかし、フォームウィジェットデータを保存すると、ピクチャフィールドには次の値があります。
{{media url=
これ以上何もない。どうすればこれを解決できますか?
回答:
画像をアップロードする場合は、画像選択ボタンを使用しないのはなぜですか?
エディターが気に入ったらそれを使用しますが、エディターを使用して画像をアップロードするのは適切な方法ではありません。代わりにボタンを使用できます。方法がわからない場合。説明させてください。
これが私のコードです。以下のコードは、ボタンを作成するブロックファイルに記述されています。
$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に書き込みます。それに従って、ブロックファイルとして適用する必要があります。
これがあなたのお役に立てば幸いです。質問がある場合はお知らせください。
これは、Magento 2.1の既知の問題のようです。トピックの詳細については、githubへのリンクをご覧ください。 https://github.com/magento/magento2/issues/6138 いくつかの異なる修正が試される可能性があるようです。
最後のコミットを確認して、githubでそのパスを作成し、https://github.com/magento/magento2/commit/ba6612462c260da7cc534b6365623993a6fe4311に適用してみて ください。
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"の画像の値を取得できます。