Eu recentemente implementei o Componente FileUploader Ui no meu formulário no Magento 2.1.7.
O código está aqui ( app / code / Vendor / Blog / view / adminhtml / ui_component / vendor_blog_form.xml ):
<field name="featured_images">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" translate="true" xsi:type="string">Hervorgehobene Bilder:</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="componentType" xsi:type="string">fileUploader</item>
<item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
<item name="notice" xsi:type="string" translate="true">Erlaubte Dateitypen: png, gif, jpg, jpeg.</item>
<item name="maxFileSize" xsi:type="number">2097152</item>
<item name="source" xsi:type="string">blog</item>
<item name="sortOrder" xsi:type="number">10</item>
<item name="dataScope" xsi:type="string">featured_images</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="vendor_blog/blog/upload"/>
</item>
</item>
</argument>
</field>
Meu Controller para isso é este ( app / code / Vendor / Blog / Controller / Adminhtml / Blog / Upload.php ):
<?php
namespace Vendor\Blog\Controller\Adminhtml\Blog;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Backend\App\Action;
class Upload extends \Vendor\Blog\Controller\Adminhtml\Blog
{
protected $_fileUploaderFactory;
protected $_directory_list;
protected $_logger;
public function __construct(
Action\Context $context,
\Magento\Framework\Registry $coreRegistry,
\Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,
\Magento\Framework\App\Filesystem\DirectoryList $directory_list,
\Psr\Log\LoggerInterface $logger
) {
$this->_fileUploaderFactory = $fileUploaderFactory;
$this->_directory_list = $directory_list;
$this->_logger = $logger;
parent::__construct($context, $coreRegistry);
}
public function execute(){
$uploader = $this->_fileUploaderFactory->create(['fileId' => 'featured_images']);
$uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
$uploader->setAllowRenameFiles(false);
$uploader->setFilesDispersion(false);
$path = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath('blog');
//$path = $this->_directory_list->getPath('media') . '/blog';
$this->_logger->debug('Uploader.php: '.$path);
$uploader->save($path);
}
}
No entanto, quando carrego uma imagem e inspeciono a chamada no console do Chrome, recebo um erro 500 com exceção: o array $ _FILES está vazio .
Estou lutando por dois dias, mas não consigo fazer o trabalho direito. Quando descomente a $path
linha de variável alternativa , o Upload será bem-sucedido, mas não recebo uma visualização.
Li que pode ser o enctype
formulário que está causando o problema, mas não encontrei nenhuma informação sobre como verificar isso em um formulário de Componente da interface do usuário.
Se você precisar de todo o código de exceção, entre em contato.
Agradeço toda ajuda possível. Obrigado!
fonte
Respostas:
Sigo estas etapas para adicionar o componente UI fileuploader no formulário de administração
Eu uso o componente UI fileuploader para fazer upload de um ícone para minha extensão de Perguntas frequentes. Você pode consultar aqui: https://github.com/mageprince/magento2-FAQ
1) Adicionar campo em
admin_form.xml
(Formulário do administrador)2) Agora precisamos criar um controlador que definimos no
uploaderConfig
formulário de administração:<item name="url" xsi:type="url" path="vendor_module/faqgroup/upload"/>
3) Criar
ImageUploader.php
4) Criar
image-preview.html
5) Agora adicione argumentos para
ImageUploader.php
em di.xmlVerifique este arquivo para carregar a imagem carregada no formulário de edição: DataProvider.php
SAÍDA:
Para salvar a imagem no banco de dados
Para mostrar a imagem carregada na página de edição do formulário:
fonte
Suplemento para o componente Magento 2.2 UI
Compare com o Magento 2.1, no Magento 2.2 , o componente da interface do usuário tinha algumas diferenças opcionais, como abaixo. Poderíamos fazer uso do funcionário
Magento_Catalog/image-preview
como modelo de visualização e o restante dos códigos, como controller, poderia se referir à resposta aceita .fonte
TypeError: value.map is not a function
. Como posso consertar isso?