Cargue una imagen de Uppy a la interfaz en Magento 2.4.7

En Magento 2.4.7 podemos cargar archivos usando la biblioteca Uppy JS. Aquí, aprenderemos cómo cargar una imagen en el frontend en Magento 2. Primero, necesitamos crear el archivo de ruta con el nombre Routes.xml Código para el archivo etc/frontend/routes.xml Entonces, necesitamos crear el archivo del controlador, Controller/Index / Index.php Código para el archivo Controller/Index/Index.php páginaFábrica = $páginaFábrica; } función pública ejecutar() { return $this->pageFactory->create(); } } Ahora necesitamos crear un archivo de diseño con el nombre upload_index_index.xml. Código para el archivo view/frontend/layout/upload_index_index.xml. En la carpeta de plantillas, necesitamos crear un archivo de plantilla con el nombre form.phtml para mostrar el formulario. Código para el archivo view/frontend/templates/form.phtml

En la carpeta js, necesitamos crear un archivo js con el nombre uppy-init.phtml para inicializar uppy. Código para el archivo view/frontend/web/js/uppy-init.js define([
‘jquery’,
‘jquery/uppy-core’
]function($){ $.widget(‘mage.intUppy’, { /** * Inicialización del widget * @private */ _create: function() { config = this.options; $(‘.upload-img-btn’ ) .on(‘hacer clic’, función() { $(‘.uppy-Dashboard-input:first’).hacer clic(); }) $(‘.delete’).on(‘hacer clic’, función() { $ (‘.uppy-StatusBar-actionBtn’).click(); $(‘.img-preview’).html(»); $(‘.delete’).css(‘display’, ‘none’); }) const uppy = new Uppy.Uppy({ autoProceed: verdadero, restricciones: { maxFileSize: 2000000, maxNumberOfFiles: 1, minNumberOfFiles: 1, AllowFileTypes: [‘image/*’] }, }); uppy.use(Uppy.Dashboard, {trigger: ‘#select-files’, en línea: verdadero, destino: ‘#uppy-root’, }); uppy.uso(Uppy. uppy.on(‘completo’, función (resultado) { $(‘.delete’).css(‘display’, ‘bloque’); console.log(‘Carga exitosa:’, resultado. exitoso[0].respuesta.cuerpo.nombredearchivo); var imgpreview = $(‘.uppy-dashboard-files’).html(); $(‘.img-preview’).html(imgpreview); }); } }); devolver $.mage.intUppy; }); Necesitamos crear un archivo de controlador con el nombre UploadImage.php para cargar el archivo. Código para el archivo Controller/Index/UploadImage.php resultadoJsonFactory = $resultadoJsonFactory; $this->mediaUploaderFactory = $mediaUploaderFactory; $this->logger = $logger; $this->mediaDirectory = $directoryList->getPath(DirectoryList::MEDIA); } función pública ejecutar() { $resultado = $this->resultJsonFactory->create(); prueba { $fileName = $this->upload(‘imagen’); devolver $resultado->setData([‘fileName’ => $fileName]); } catch (\Exception $e) { return $resultado->setData([‘error’ => $e->getMessage()]); } } carga de función pública ($fileId) { prueba { $uploader = $this->mediaUploaderFactory->create([‘fileId’ => $fileId]); $cargador->setAllowedExtensions([‘jpg’, ‘jpeg’, ‘gif’, ‘png’]); $uploader->setAllowRenameFiles(verdadero); $uploader->setFilesDispersion(verdadero); $resultado = $uploader->save($this->mediaDirectory. ‘/mymodule’); devuelve $resultado[‘file’]; } catch (\Exception $e) { $this->logger->critical($e->getMessage()); falso retorno; } } } Contratar desarrolladores de Magento | Certificado de comercio de Adobe

About Francisco

Check Also

¿Cuánto cuesta crear una aplicación como Costco?

Con el tamaño del mercado en rápido crecimiento de la industria del comercio electrónico, intentar …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *