Aggiunta di un caricatore di immagini in un modulo di amministrazione in Magento 2 (2023)

Magento

In questo tutorial vedremo come aggiungere un componente ImageUploader a un modulo lato amministratore che ci consente di caricare immagini.

Shahid Nasser
Leggerepiù postda questo autore.

Shahid Nasser

26 luglio 2021•18 minuti di lettura

Aggiunta di un caricatore di immagini in un modulo di amministrazione in Magento 2 (3)

Aggiunta di un caricatore di immagini in un modulo di amministrazione in Magento 2 (4)

I moduli di amministrazione in Magento 2 sono creati con componenti dell'interfaccia utente. Esistono diversi tipi di componenti dell'interfaccia utente che ci consentono di creare molti tipi di campi nei moduli. Uno di questi è ilCaricatore di immaginicomponente.

In questo tutorial vedremo come aggiungere un componente ImageUploader a un modulo lato amministratore che ci consente di caricare immagini.

Prerequisiti

In questa sezione esamineremo le nozioni di base sulla creazione di un modulo, sull'aggiunta di una voce di menu sul lato amministratore e sulla creazione di una griglia che mostri le immagini che abbiamo caricato prima di iniziare a lavorare sul nostro modulo. Se sai già come fare tutto questo o hai semplicemente bisogno di vedere come creare un modulo con il componente ImageUploader, puoi saltare questa sezione.

Crea il modulo

Esamineremo rapidamente come creare un modulo in Magento 2. Crea inapp/codicele directoryFORNITORE/MODULODoveVENDITOREè il tuo nome o il nome della tua azienda eMODULOè il nome del modulo. Daremo un nome a questo moduloCaricatore di immagini.

Assicurati di sostituire tutte le istanze diVENDITOREcon il nome del fornitore scelto, come sarà in ogni frammento di codice durante il tutorial.

Poi, dentroCaricatore di immaginicreareregistrazione.phpcon il seguente contenuto:

utilizzo Magento\Struttura\Componente\ComponentRegistrar;ComponentRegistrar::Registrati(ComponentRegistrar::MODULO, "VENDOR_ImageUploader", __DIR__);

Crea una directory chiamataecceterae al suo interno crearemodulo.xmlcon il seguente contenuto:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <modulo nome="VENDOR_ImageUploader" setup_version="0.0.1" />config>

Questi sono gli unici file richiesti per creare un modulo. Successivamente, dovremo creare gli script per creare una tabella nel database in cui memorizzare il percorso delle immagini che caricheremo. Crea una directory chiamataImpostaredentroCaricatore di immagini, quindi crea il fileInstalla Schema.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Impostare;utilizzo Magento\Struttura\DB\Ddl\Tavolo;utilizzo Magento\Struttura\Impostare\Installa SchemaInterface;utilizzo Magento\Struttura\Impostare\SchemaSetupInterface;utilizzo Magento\Struttura\Impostare\ModuleContextInterface;classe Installa schema implementa Installa SchemaInterface { pubblico funzione installare(SchemaSetupInterface $impostazione, ModuleContextInterface $contesto) { $impostazione->startSetup(); $imagesTableName = $impostazione->getTable("VENDOR_immagini"); Se (!$impostazione->getConnection()->isTableEsiste($imagesTableName)) { $immaginiTabella = $impostazione->getConnection()->nuova tabella($imagesTableName) ->aggiungiColonna( 'id_immagine', Tavolo::TIPO_INTERO, nullo, [ Tavolo::OPZIONE_IDENTITÀ => VERO, Tavolo::OPZIONE_PRIMARY => VERO, Tavolo::OPZIONE_UNSIGNED => VERO, Tavolo::OPZIONE_NULLABLE => falso, ], "ID immagine" ) ->aggiungiColonna( 'sentiero', Tavolo::TIPO_TESTO, 255, [ Tavolo::OPZIONE_NULLABLE => falso ], 'Percorso immagine' ); $impostazione->getConnection()->crea tabella($immaginiTabella); } $impostazione->endSetup(); }}

Assicurati di sostituireVENDITOREnel nome della tabella con il nome del tuo fornitore.

Ora creeremo i modelli necessari per la nostra tabella. Innanzitutto, crea le directoryApi/DatiSottoCaricatore di immaginie dentroDaticreare il fileImageInterface.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Api\Dati;interfaccia ImmagineInterfaccia { cost ID = 'id_immagine'; cost SENTIERO = 'sentiero'; pubblico funzione getPath (); pubblico funzione setPath ($valore);}

Quindi, crea la directoryModelloSottoCaricatore di immaginie al suo interno creareImmagine.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Modello;utilizzo Magento\Struttura\DataObject\Interfaccia di identità;utilizzo Magento\Struttura\Modello\Modello astratto;utilizzo LOCALE\Caricatore di immagini\Api\Dati\ImmagineInterfaccia;utilizzo LOCALE\Caricatore di immagini\Modello\Modello risorsa\Immagine COMEResourceModelImage;classe Immagine si estende Modello astratto implementa ImmagineInterfaccia,Interfaccia di identità{ cost CACHE_TAG = "VENDOR_immagini"; pubblico funzione getIdentities() { ritorno [ se stesso::CACHE_TAG . '_' . $questo->getId(), ]; } protetto funzione _costruire () { $questo->_dentro(ResourceModelImage::classe); } pubblico funzione getPath() { ritorno $questo->getData(se stesso::SENTIERO); } pubblico funzione setPath($valore) { ritorno $questo->setData(se stesso::SENTIERO, $valore); }}

Aggiungi i percorsi

Per aggiungere percorsi per poter accedere al nostro modulo dal lato amministratore, crea sottoecceterala directoryadminhtmle dentroadminhtmlcrearepercorsi.xmlcon il seguente contenuto:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="amministratore"> <itinerario id="imageuploader" frontName="imageuploader"> <modulo nome="VENDOR_ImageUploader" /> itinerario> router>config>

Aggiungi una voce di menu dal lato amministratore

In questa sezione aggiungeremo una voce di menu per poter accedere alla pagina per caricare le immagini. Innanzitutto, crea sottoecceterail fileacl.xmlcon il seguente contenuto:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd"> <acl> <risorse> <risorsa id="Magento_Backend::admin"> <risorsa id="VENDOR_ImageUploader::carica" titolo="Carica immagini" tradurre="titolo" ordinamento="30" /> risorsa> risorse> acl>config>

Poi, dentroecc/adminhtmlcrearemenu.xmlcon il seguente contenuto:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urna:magento:module:Magento_Backend:etc/menu.xsd"> <menù> <aggiungere id="VENDOR_ImageUploader::images_uploader" titolo="Caricatore di immagini" tradurre="titolo" modulo="VENDOR_ImageUploader" ordinamento="20" risorsa="VENDOR_ImageUploader::carica" /> <aggiungere id="VENDOR_ImageUploader::immagini" titolo="Tutte le immagini" tradurre="titolo" modulo="VENDOR_ImageUploader" ordinamento="0" genitore="VENDOR_ImageUploader::images_uploader" azione="caricatore di immagini/immagini" risorsa="VENDOR_ImageUploader::carica" /> menù>config>

Questo creerà una voce di menu chiamataCaricatore di immaginie quando si fa clic su di esso, il sottomenu includerà l'elementoTutte le immagini.

Ora esegui il comando seguente per compilare le modifiche:

php bin/magento setup:di:compile

Vai subito al lato amministratore ed effettua il login. Vedrai nella barra laterale una nuova voce di menu chiamataCaricatore di immagini.

Aggiunta di un caricatore di immagini in un modulo di amministrazione in Magento 2 (5)

Crea la pagina di elenco delle immagini

Ora creeremo la paginaTutte le immaginiportano a, che sarà una griglia delle immagini caricate.

Creare prima le directoryController\Adminhtml\ImmaginiSottoCaricatore di immagini. Quindi, crea il fileIndice.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Controllore\Adminhtml\immagini;classe Indice si estende \Magento\Backend\App\Azione { /** * * @var \Magento\Framework\View\Result\PageFactory */ protetto $risultatoPageFactory; pubblico funzione __costruire( \Magento\Backend\App\Azione\Contesto $contesto, \Magento\Struttura\Visualizzazione\Risultato\PageFactory $risultatoPageFactory ) { genitore::__costruire($contesto); $questo->risultatoPageFactory = $risultatoPageFactory; } pubblico funzione eseguire() { /** @var \Magento\Backend\Model\View\Result\Page $resultPage */ $paginarisultato = $questo->risultatoPageFactory->creare(); $paginarisultato->setActiveMenu('VENDOR_ImageUploader::images_uploader'); $paginarisultato->getConfig()->getTitle()->anteporre(__('Immagini')); ritorno $paginarisultato; }}

Poi, sottoCaricatore di immaginicreare le directoryvista/adminhtml/layoute dentrodisposizionecreareimageuploader_images_index.xmlcon il seguente contenuto:

<pagina xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urna:magento:framework:View/Layout/etc/page_configuration.xsd"> <corpo> <riferimentoContenitore nome="contenuto"> <uiComponent nome="lista_immagini" /> riferimentoContenitore> corpo>pagina>

Successivamente, crea sottovisualizza/adminhtmlla directoryui_componente all'interno di quella directory creare il fileelenco_immagini.xmlcon il seguente contenuto:

<elenco xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urna:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <discussione nome="dati" xsi:tipo="vettore"> <articolo nome="js_config" xsi:tipo="vettore"> <articolo nome="fornitore" xsi:tipo="corda">lista_immagini.lista_immagini_data_sourcearticolo> articolo> discussione> <impostazioni> <pulsanti> <pulsante nome="caricamento"> <URL sentiero="*/*/caricamento"/> <classe>primarioclasse> <etichetta tradurre="VERO">Carica immaginietichetta> pulsante> pulsanti> <filatore>immagini_colonnefilatore> <Dipartimento> <dip>lista_immagini.lista_immagini_data_sourcedip> Dipartimento> impostazioni> <fonte di dati nome="images_list_data_source" componente="Magento_Ui/js/grid/provider"> <impostazioni> <storageConfig> <param nome="campoindice" xsi:tipo="corda">id_immagineparam> storageConfig> <aggiornamentoUrl sentiero="mui/index/render"/> impostazioni> <dataProvider classe="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" nome="images_list_data_source"> <impostazioni> <nomecamporichiesta>idnomecamporichiesta> <nomecampoprimario>id_immaginenomecampoprimario> impostazioni> dataProvider> fonte di dati> <colonne nome="immagini_colonne"> <colonna nome="id_immagine" ordinamento="10"> <impostazioni> <filtro>testofiltro> <tipo di dati>testotipo di dati> <etichetta tradurre="VERO">IDetichetta> impostazioni> colonna> <colonna nome="sentiero" componente="Magento_Ui/js/grid/columns/thumbnail" classe="FORNITORE\ImageUploader\Ui\Component\Columns\Thumbnail"> <impostazioni> <hasPreview>0hasPreview> <addField>falsoaddField> <etichetta tradurre="VERO">Miniaturaetichetta> <ordinabile>falsoordinabile> impostazioni> colonna> colonne>elenco>

Questo creerà un elenco di griglia che mostrerà le immagini caricate. Mostrerà 2 colonne, l'ID e una miniatura. Per mostrare la miniatura, dobbiamo creare la classe per il componente UI. Crea sottoCaricatore di immaginile directoryUi\Componente\Colonnee dentroColonnecreare il fileMiniatura.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Ui\Componente\Colonne;utilizzo Magento\Backend\Modello\URLInterface;utilizzo Magento\Struttura\Visualizzazione\Elemento\Componente Ui\ContextInterface;utilizzo Magento\Struttura\Visualizzazione\Elemento\UiComponentFactory;utilizzo Magento\Negozio\Modello\Interfaccia StoreManager;utilizzo Magento\Ui\Componente\Elenco\Colonne\Colonna;classe Miniatura si estende Colonna { /** * * @var StoreManagerInterface */ protetto $storeManagerInterface; pubblico funzione __costruire( ContextInterface $contesto, UiComponentFactory $uiComponentFactory, Interfaccia StoreManager $storeManagerInterface, vettore $componenti = [], vettore $dati = [] ) { genitore::__costruire($contesto, $uiComponentFactory, $componenti, $dati); $questo->storeManagerInterface = $storeManagerInterface; } pubblico funzione preparareDataSource(vettore $dataSource) { per ciascuno($dataSource["dati"]["elementi"] COME &$articolo) { Se (è impostato($articolo['sentiero'])) { $URL = $questo->storeManagerInterface->getStore()->getBaseUrl(URLInterface::URL_TYPE_MEDIA) . $articolo['sentiero']; $articolo['percorso_src'] = $URL; $articolo['percorso_alt'] = $articolo['id_immagine']; $articolo['percorso_link'] = $URL; $articolo['percorso_orig_src'] = $URL; } } ritorno $dataSource; }}

Questa lezione si estenderàMagento\Ui\Component\Listing\Columns\Columne sovrascrivere la funzionepreparareDataSource. In questa funzione, stiamo apportando modifiche al filesentierocolonna per mostrare una miniatura. Per poter mostrare una miniatura utilizzando il componenteMagento_Ui/js/grid/columns/thumbnail, dobbiamo aggiungere ad ogni riga della tabella i campiFIELD_src,CAMPO_alt,FIELD_linkEFIELD_orig_src, DoveCAMPOè il nome del campo della miniatura, in questo caso èsentiero.

Infine, aggiungi quanto segue aecc/di.xml:

<tipo nome="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <argomenti> <discussione nome="collezioni" xsi:tipo="vettore"> <articolo nome="images_list_data_source" xsi:tipo="corda">FORNITORE\ImageUploader\Model\ResourceModel\Image\Grid\Collectionarticolo> discussione> argomenti> tipo> <virtualType nome="FORNITORE\ImageUploader\Model\ResourceModel\Image\Grid\Collection" tipo="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult"> <argomenti> <discussione nome="mainTable" xsi:tipo="corda">VENDITORE_immaginidiscussione> <discussione nome="risorsaModel" xsi:tipo="corda">FORNITORE\ImageUploader\Model\ResourceModel\Imagediscussione> argomenti> virtualType>

La nostra pagina di elenco delle immagini è pronta. Dobbiamo prima compilare le modifiche:

php bin/magento setup:di:compile

Quindi, accedi nuovamente al lato amministratore e fai clic suImageUploader -> Tutte le immagini.Verrà visualizzata una pagina con una tabella vuota e un pulsante per caricare nuove immagini.

Aggiunta di un caricatore di immagini in un modulo di amministrazione in Magento 2 (6)

Ora siamo pronti per creare il modulo e aggiungervi il componente ImageUploader.

Crea modulo interfaccia utente

Per prima cosa dovremo creare il controller che gestirà la richiesta. Crea sottoCaricatore immagini\Controller\Adminhtml\Immaginiil fileCarica.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Controllore\Adminhtml\immagini;classe Caricamento si estende \Magento\Backend\App\Azione { /** * * @var \Magento\Framework\View\Result\PageFactory */ protetto $risultatoPageFactory; pubblico funzione __costruire( \Magento\Backend\App\Azione\Contesto $contesto, \Magento\Struttura\Visualizzazione\Risultato\PageFactory $risultatoPageFactory ) { genitore::__costruire($contesto); $questo->risultatoPageFactory = $risultatoPageFactory; } pubblico funzione eseguire() { /** @var \Magento\Backend\Model\View\Result\Page $resultPage */ $paginarisultato = $questo->risultatoPageFactory->creare(); $paginarisultato->setActiveMenu('VENDOR_ImageUploader::images_uploader'); $paginarisultato->getConfig()->getTitle()->anteporre(__('Carica immagine')); ritorno $paginarisultato; }}

ComeIndice.php, questo mostra solo la pagina. Dovremo creare il layout per questa pagina. Crea sottovista/adminhtml/layoutil fileimageuploader_images_upload.xmlcon il seguente contenuto:

<pagina xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urna:magento:framework:View/Layout/etc/page_configuration.xsd"> <corpo> <riferimentoContenitore nome="contenuto"> <uiComponent nome="immagini_forma" /> riferimentoContenitore> corpo>pagina>

Questo mostra solo un componente dell'interfaccia utente chiamatoimmagini_forma, che creeremo successivamente. Crea sottoview/adminhtml/ui_componentil fileimmagini_form.xmlcon il seguente contenuto:

<modulo xmlns:xsi="http://www.w3.org/2001/XMLSchema-istanza" xsi:noNamespaceSchemaLocation="urna:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <discussione nome="dati" xsi:tipo="vettore"> <articolo nome="js_config" xsi:tipo="vettore"> <articolo nome="fornitore" xsi:tipo="corda">images_form.images_form_data_sourcearticolo> articolo> <articolo nome="etichetta" xsi:tipo="corda" tradurre="VERO">Carica immaginiarticolo> <articolo nome="reverseMetadataMerge" xsi:tipo="booleano">VEROarticolo> <articolo nome="modello" xsi:tipo="corda">modelli/modulo/pieghevolearticolo> <articolo nome="config" xsi:tipo="vettore"> <articolo nome="dataScope" xsi:tipo="corda">datiarticolo> <articolo nome="spazio dei nomi" xsi:tipo="corda">immagini_formaarticolo> articolo> discussione> <impostazioni> <pulsanti> <pulsante nome="salva" classe="FORNITORE\ImageUploader\Block\Adminhtml\Form\UploadButton"/> <pulsante nome="Indietro" classe="FORNITORE\ImageUploader\Block\Adminhtml\Form\BackButton"/> pulsanti> <Dipartimento> <dip>images_form.images_form_data_sourcedip> Dipartimento> impostazioni> <fonte di dati nome="images_form_data_source"> <discussione nome="dataProvider" xsi:tipo="oggetto configurabile"> <discussione nome="nome" xsi:tipo="corda">images_form_data_sourcediscussione> <discussione nome="classe" xsi:tipo="corda">FORNITORE\ImageUploader\Ui\Component\Form\DataProviderdiscussione> <discussione nome="nomecampoprimario" xsi:tipo="corda">id_immaginediscussione> <discussione nome="nomecamporichiesta" xsi:tipo="corda">iddiscussione> <discussione nome="dati" xsi:tipo="vettore"> <articolo nome="config" xsi:tipo="vettore"> <articolo nome="invia_url" xsi:tipo="URL" sentiero="*/*/salva"/> articolo> discussione> discussione> <discussione nome="dati" xsi:tipo="vettore"> <articolo nome="js_config" xsi:tipo="vettore"> <articolo nome="componente" xsi:tipo="corda">Magento_Ui/js/form/providerarticolo> articolo> discussione> fonte di dati> <fieldset nome="Immagine"> <impostazioni> <etichetta tradurre="VERO">Carica immaginietichetta> impostazioni> <campo nome="Immagine" formElement="imageUploader"> <impostazioni> <etichetta tradurre="VERO">immaginietichetta> <componenteTipo>imageUploadercomponenteTipo> <convalida> <regola nome="voce richiesta" xsi:tipo="booleano">VEROregola> convalida> impostazioni> <formElementi> <imageUploader> <impostazioni> <consentiteEstensioni>jpgjpegpngconsentiteEstensioni> <dimensioneFilemax>2097152dimensioneFilemax> <uploaderConfig> <param xsi:tipo="corda" nome="URL">imageuploader/immagini/tempUploadparam> uploaderConfig> impostazioni> imageUploader> formElementi> campo> fieldset>modulo>

Questo crea semplicemente il componente Modulo UI. Prima di approfondire i componenti e le classi di cui ha bisogno questo modulo, diamo un'occhiata al componente ImageUploader:

<campo nome="Immagine" formElement="imageUploader"> <impostazioni> <etichetta tradurre="VERO">immaginietichetta> <componenteTipo>imageUploadercomponenteTipo> <convalida> <regola nome="voce richiesta" xsi:tipo="booleano">VEROregola> convalida> impostazioni> <formElementi> <imageUploader> <impostazioni> <consentiteEstensioni>jpgjpegpngconsentiteEstensioni> <dimensioneFilemax>2097152dimensioneFilemax> <uploaderConfig> <param xsi:tipo="corda" nome="URL">imageuploader/immagini/tempUploadparam> uploaderConfig> impostazioni> imageUploader> formElementi>campo>

Nota che abbiamo definito questo campo come ImageUploader throughimageUploader. Abbiamo anche reso obbligatorio questo campo aggiungendotrueA. Poi, dentro, stiamo aggiungendo un paio di impostazioni per il file.consentiteEstensionici permette di specificare le estensioni consentite, che sono in questo casojpg,jpeg, Epng.dimensioneFilemaxè la dimensione massima consentita per il file da caricare. e infine, il paramURLdentrouploaderConfigè ilURLda inviare all'immagine caricata per il caricamento temporaneo. Viene utilizzato per mostrare un'anteprima dell'immagine caricata.

Questo componente del modulo necessita della creazione di alcune classi PHP per poter funzionare correttamente.

Innanzitutto, abbiamo aggiunto 2 pulsanti, Indietro e Carica:

<pulsante nome="salva" classe="FORNITORE\ImageUploader\Block\Adminhtml\Form\UploadButton"/> <pulsante nome="Indietro" classe="FORNITORE\ImageUploader\Block\Adminhtml\Form\BackButton"/>

Quindi, creiamo le classi per loro. Creare prima le directoryBlocco\Adminhtml\Modulo. Quindi, crea sottoModuloil fileCaricaButton.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Bloccare\Adminhtml\Modulo;utilizzo Magento\Struttura\Visualizzazione\Elemento\Componente Ui\Controllo\ButtonProviderInterface;classe Pulsante Carica implementa ButtonProviderInterface { pubblico funzione getButtonData() { ritorno [ 'etichetta' => __('Caricamento'), 'classe' => 'salva primario', 'attributo_dati' => [ 'mag-init' => ['pulsante' => ['evento' => 'salva']], 'forma-ruolo' => 'salva', ], 'ordinamento' => 90, ]; }}

Questo pulsante porta semplicemente l'utente al percorso di salvataggio. Il percorso di salvataggio è definito inimmagini_form.xmlin questa riga:

<articolo nome="invia_url" xsi:tipo="URL" sentiero="*/*/salva"/>

Inoltre, crea il fileBackButton.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Bloccare\Adminhtml\Modulo;utilizzo Magento\Backend\Modello\URLInterface;utilizzo Magento\Struttura\Visualizzazione\Elemento\Componente Ui\Controllo\ButtonProviderInterface;classe Tasto indietro implementa ButtonProviderInterface { /** @varUrlInterface */ protetto $urlInterface; pubblico funzione __costruire( URLInterface $urlInterface ) { $questo->urlInterface = $urlInterface; } pubblico funzione getButtonData() { ritorno [ 'etichetta' => __('Indietro'), 'al clic' => sprintf("posizione.href = '%s';", $questo->getBackUrl()), 'classe' => 'Indietro', 'ordinamento' => 10 ]; } pubblico funzione getBackUrl() { ritorno $questo->urlInterface->getUrl('*/*/'); }}

Questo pulsante riporta semplicemente l'utente alla pagina indice, che è la pagina che contiene l'elenco delle immagini.

Successivamente, dobbiamo creare le seguenti classi definite inimmagini_form.xml:

<discussione nome="classe" xsi:tipo="corda">FORNITORE\ImageUploader\Ui\Component\Form\DataProviderdiscussione>

Questa è la classe del fornitore di dati. Di solito, questa classe è molto importante quando il modulo ha una funzionalità di modifica. Qui è dove vengono compilati i dati del record in fase di modifica per essere visualizzati nei campi del modulo.

Crea nella directoryUi\Componente\Moduloil fileDataProvider.phpcon il seguente contenuto:

 spazio dei nomi VENDITORE\Caricatore di immagini\Ui\Componente\Modulo;utilizzo Magento\Struttura\Registro;classe Fornitore di dati si estende \Magento\Ui\Fornitore di dati\AbstractDataProvider { pubblico funzione __costruire( corda $nome, corda $nomecampoprimario, corda $requestFieldName, Registro $registro, \VENDITORE\Caricatore di immagini\Modello\Modello risorsa\Immagine\CollezioneFactory $imageCollectionFactory, vettore $meta = [], vettore $dati = [] ) { genitore::__costruire($nome, $nomecampoprimario, $requestFieldName, $meta, $dati); $questo->registro = $registro; $questo->collezione = $imageCollectionFactory->creare(); } pubblico funzione getData() { ritorno []; }}

Questo restituisce semplicemente un array vuoto poiché non abbiamo la funzionalità di modifica nel nostro modulo.

Infine, creeremo il controller che dovrebbe gestire il caricamento temporaneo dell'immagine per mostrarla nell'anteprima, che si trova all'URLimageuploader/immagini/tempUpload. Quindi, crea sottoController\Adminhtml\Immaginiil fileTempUpload.phpcon il seguente contenuto:

spazio dei nomi VENDITORE\Caricatore di immagini\Controllore\Adminhtml\immagini;utilizzo Magento\Backend\App\Azione\Contesto;utilizzo Magento\Backend\Modello\URLInterface;utilizzo Magento\Struttura\Controllore\Fabbrica dei risultati;utilizzo Magento\Struttura\Eccezione\LocalizedException;utilizzo Magento\Struttura\File system;utilizzo Magento\MediaStorage\Modello\File\UploaderFactory;utilizzo Magento\Negozio\Modello\Interfaccia StoreManager;classe Caricamento temporaneo si estende \Magento\Backend\App\Azione { /** * * @var UploaderFactory */ protetto $uploaderFactory; /** * @var Filesystem\Directory\WriteInterface */ protetto $mediaDirectory; /** * @var StoreManagerInterface */ protetto $storeManager; pubblico funzione __costruire( Contesto $contesto, UploaderFactory $uploaderFactory, File system $filesystem, Interfaccia StoreManager $storeManager ) { genitore::__costruire($contesto); $questo->uploaderFactory = $uploaderFactory; $questo->mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Struttura\App\File system\Elenco directory::MEDIA); $questo->responsabile del negozio = $storeManager; } pubblico funzione eseguire() { $jsonResult = $questo->risultatoFabbrica->creare(Fabbrica dei risultati::TIPO_JSON); Tentativo { $fileUploader = $questo->uploaderFactory->creare(['IDfile' => 'Immagine']); $fileUploader->setAllowedExtensions(['jpg', 'jpeg', 'png']); $fileUploader->setAllowRenameFiles(VERO); $fileUploader->setAllowCreateFolders(VERO); $fileUploader->setFilesDispersion(falso); $fileUploader->convalidare(); $risultato = $fileUploader->salva($questo->mediaDirectory->getAbsolutePath('tmp/imageUploader/immagini')); $risultato['URL'] = $questo->responsabile del negozio->getStore()->getBaseUrl(URLInterface::URL_TYPE_MEDIA) . 'tmp/imageUploader/immagini/' . ltrim(str_replace('\\', '/', $risultato['file']), '/'); ritorno $jsonResult->setData($risultato); } presa (LocalizedException $e) { ritorno $jsonResult->setData(['codice di errore' => 0, 'errore' => $e->getMessage()]); } presa (\Eccezione $e) { registro_errori($e->getMessage()); registro_errori($e->getTraceAsString()); ritorno $jsonResult->setData(['codice di errore' => 0, 'errore' => __("Si è verificato un errore, riprova più tardi.")]); } }}

Analizziamolo per capirlo meglio:

Stiamo usandouploaderFactorydi tipoMagento\MediaStorage\Model\File\UploaderFactoryper ottenere prima l'immagine caricata dalla richiesta. Lo passiamoIDfilecon il valoreImmagine, che è il nome del campo. Se fosse stato chiamato qualcos'altro come "file", alloraIDfilesaràfile.
Successivamente specificheremo alcune regole per la convalida. Stiamo impostando le estensioni consentite consetAllowedExtensions. Stiamo anche usandosetAllowRenameFilesper consentire di rinominare il file caricato al momento del caricamento,setAllowCreateFoldersper consentire la creazione di una cartella se non esiste esetFilesDispersionper disabilitare la dispersione dei file.
Quindi, stiamo salvando il file temporaneo intmp/imageUploader/imagessotto ilmediadirectory inpub.
Infine, stiamo restituendo l'URL del file caricato.

Carica e salva immagine

L'ultima cosa che dobbiamo implementare è il controller Save. Questo controller gestirà l'invio dell'immagine per caricarla e salvarla nel nostro database. Per fare ciò, crea sottoController\Adminhtml\Immaginiil fileSalva.phpcon il seguente contenuto:

spazio dei nomi VENDITORE\Caricatore di immagini\Controllore\Adminhtml\immagini;utilizzo Magento\Backend\App\Azione\Contesto;utilizzo Magento\Struttura\Eccezione\LocalizedException;utilizzo Magento\Struttura\File system;utilizzo Magento\Struttura\Validazione\ValidationException;utilizzo Magento\MediaStorage\Modello\File\UploaderFactory;classe Salva si estende \Magento\Backend\App\Azione { /** * * @var UploaderFactory */ protetto $uploaderFactory; /** * @var \VENDOR\ImageUploader\Model\ImageFactory */ protetto $imageFactory; /** * @var Filesystem\Directory\WriteInterface */ protetto $mediaDirectory; pubblico funzione __costruire( Contesto $contesto, UploaderFactory $uploaderFactory, File system $filesystem, \VENDITORE\Caricatore di immagini\Modello\ImageFactory $imageFactory ) { genitore::__costruire($contesto); $questo->uploaderFactory = $uploaderFactory; $questo->imageFactory = $imageFactory; $questo->mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Struttura\App\File system\Elenco directory::MEDIA); } pubblico funzione eseguire() { Tentativo { Se ($questo->getRequest()->getMethod() !== 'INVIARE' || !$questo->_formKeyValidator->convalidare($questo->getRequest())) { gettare nuovo LocalizedException(__('Richiesta non valida')); } //convalida l'immagine $fileUploader = nullo; $parametri = $questo->getRequest()->getParams(); Tentativo { $IDimmagine = 'Immagine'; Se (è impostato($parametri['Immagine']) && contare($parametri['Immagine'])) { $IDimmagine = $parametri['Immagine'][0]; Se (!il file esiste($IDimmagine['nome_tmp'])) { $IDimmagine['nome_tmp'] = $IDimmagine['sentiero'] . '/' . $IDimmagine['file']; } } $fileUploader = $questo->uploaderFactory->creare(['IDfile' => $IDimmagine]); $fileUploader->setAllowedExtensions(['jpg', 'jpeg', 'png']); $fileUploader->setAllowRenameFiles(VERO); $fileUploader->setAllowCreateFolders(VERO); $fileUploader->validateFile(); //carica immagine $informazioni = $fileUploader->salva($questo->mediaDirectory->getAbsolutePath('Caricatore immagini/immagini')); /** @var \VENDOR\ImageUploader\Model\Image */ $immagine = $questo->imageFactory->creare(); $immagine->setPath($questo->mediaDirectory->getRelativePath('Caricatore immagini/immagini') . '/' . $informazioni['file']); $immagine->salva(); } presa (ValidationException $e) { gettare nuovo LocalizedException(__('L'estensione immagine non è supportata. Le uniche estensioni consentite sono jpg, jpeg e png')); } presa (\Eccezione $e) { //se viene lanciata un'eccezione, non è stata caricata alcuna immagine gettare nuovo LocalizedException(__('L'immagine è obbligatoria')); } $questo->messageManager->addSuccessMessage(__('Immagine caricata con successo')); ritorno $questo->_reindirizzare('*/*/indice'); } presa (LocalizedException $e) { $questo->messageManager->addErrorMessage($e->getMessage()); ritorno $questo->_reindirizzare('*/*/caricamento'); } presa (\Eccezione $e) { registro_errori($e->getMessage()); registro_errori($e->getTraceAsString()); $questo->messageManager->addErrorMessage(__("Si è verificato un errore, riprova più tardi.")); ritorno $questo->_reindirizzare('*/*/caricamento'); } }}

Questo è abbastanza simile aCaricamento temporaneo. Ancora una volta, analizziamolo:

Stiamo convalidando la richiesta controllando che il metodo lo siaINVIAREe la chiave del modulo è valida.
Stiamo ricevendo i parametri passati alla richiesta.
Stiamo controllando se$params['immagine']è un'immagine, quindi stiamo impostando il fileIDimmaginealla prima immagine. Questo perché ilCaricatore di immaginipuò accettare più immagini.
Dopodiché, eseguiremo gli stessi passaggi che abbiamo eseguito in precedenzaCaricamento temporaneo. Stiamo impostando alcune opzioni come le estensioni consentite.
Stiamo salvando il file inimageUploader/immaginisotto ilmediadirectory inpub.
Stiamo creando una nuova istanza diImmagine, che è il modello per la tabella che abbiamo creato in questo modulo e stiamo impostando il percorso dell'immagine caricata. Successivamente, salviamo il modello.
Se non si verificano errori e tutto funziona correttamente, inviamo un messaggio di successo e reindirizziamo alla pagina dell'indice che mostra l'elenco delle immagini.

Il nostro modulo, tutti i suoi componenti e i controller ad esso correlati sono pronti. Non ci resta che compilare il nostro codice:

php bin/magento setup:di:compile

Fatto ciò, accedi nuovamente al lato amministratore del tuo negozio. Clicca suImageUploader -> Tutte le immagini -> Carica immagini.Vedrai un modulo con un caricatore di immagini. Prova a caricare un'immagine facendo clic suCaricamentoaccanto alimmaginicampo. Il campo del caricatore di immagini caricherà l'immagine utilizzando il percorsoimageuploader/immagini/tempuploadsu cui caricherà l'immaginepub/media/tmp/imageuploader/images, quindi restituisce l'URL. Quindi, il campo ImageUploader mostrerà un'anteprima del file.

Aggiunta di un caricatore di immagini in un modulo di amministrazione in Magento 2 (7)

Fare clic sul pulsante arancioneCaricamentonell'angolo in alto a destra. Ciò invierà i dati del modulo all'endpointimageuploader/immagini/save. Questo salverà l'immagine sottopub/media/imageuploader/images, quindi salva l'immagine con il percorso nella tabella che abbiamo creato per il modulo. Se tutto è corretto, verrai reindirizzato alla pagina dell'elenco e vedrai l'immagine che hai appena caricato.

Aggiunta di un caricatore di immagini in un modulo di amministrazione in Magento 2 (8)

Conclusione

Ecco come funziona un componente ImageUploader! Successivamente, puoi provare ad aggiungere funzionalità di eliminazione. Puoi anche provare ad aggiungere altri campi al modulo, se necessario. Funzionerà perfettamente.

Se ti piacciono i miei contenuti e vuoi supportarmi, condividi questo articolo sui tuoi social media oOffrimi un caffè!

Iscriviti alla Newsletter

Iscriviti alla newsletter per essere informato su nuovi tutorial e articoli!