Muchas aplicaciones dependen de la web para su contenido. Al alojar activos de imágenes en una plataforma en la nube de terceros, puede asegurarse de que sus aplicaciones tengan un acceso rápido y eficiente a ellos.
Además, evitará los costos de almacenamiento y ancho de banda en los que incurriría al alojar los activos utilizando servidores locales. Esta es la razón por la que las soluciones en la nube de alojamiento de imágenes como Cloudinary se han vuelto cada vez más populares.
Siga para aprender a usar Cloudinary para alojar sus activos de imagen.
¿Qué es el alojamiento de imágenes y por qué es importante?
El alojamiento de imágenes es un tipo de servicio de alojamiento web que le permite almacenar y acceder a sus activos de imagen u otros medios digitales en una plataforma de nube de terceros.
Los recursos multimedia, como las imágenes, son esenciales para crear una excelente experiencia de usuario para cualquier aplicación web. Los servicios de alojamiento de imágenes le facilitan cargar, almacenar, recuperar y administrar sus activos desde la nube, en consecuencia, mejorando el rendimiento de su aplicación al garantizar tiempos de carga más rápidos y una mejor imagen calidad.
¿Qué es nuboso?
Cloudinary es una plataforma de gestión de medios basada en la nube. Proporciona funciones que facilitan la carga, el almacenamiento y la administración de activos de medios digitales, como imágenes y videos. Esencialmente, Cloudinary facilita la administración de todos sus medios digitales necesarios para cualquier aplicación desde una plataforma.
Configurar un proyecto de Cloudinary para alojar archivos de imagen
Para comenzar a cargar y alojar archivos de imagen, regístrese para obtener un nublado cuenta.
Inicie sesión en el panel de control de su cuenta y haga clic en la pestaña del icono de configuración en el panel de menú izquierdo.
En la página de configuración, haga clic en el Subir para abrir la página de configuración de carga.
Ahora, dirígete a la Subir ajustes preestablecidos sección de configuración y haga clic en Agregar preajuste de carga para crear un nuevo ajuste preestablecido de carga para su aplicación.
Un ajuste preestablecido de carga es una configuración de parámetros que define la estructura predeterminada de cualquier archivo multimedia que cargue en Cloudinary. Le permiten definir un conjunto de reglas para aplicar cada vez que cargue un archivo multimedia.
Los parámetros preestablecidos aseguran que Cloudinary optimice todos los archivos multimedia para entregarlos a su aplicación, mejorando el rendimiento y reduciendo el tiempo de carga.
Complete el nombre de su preset y seleccione no firmado en el menú desplegable que se muestra. Los modos de firma le permiten especificar los métodos que usa Cloudinary para autenticar y autorizar cualquier carga de medios.
Si selecciona el modo sin firmar, podrá realizar cargas en su almacenamiento de Cloudinary desde sus aplicaciones sin autenticarse con Cloudinary. En pocas palabras, este modo le permite seleccionar una imagen y cargarla directamente desde su aplicación. Cloudinary luego lo entregará a pedido.
Después de hacer esos cambios, continúe y haga clic en Ahorrar para crear el ajuste preestablecido de carga.
Crear una aplicación de reacción de demostración
Puede configurar una aplicación React simple para manejar la funcionalidad de carga utilizando el punto final de la API de Cloudinary y el widget de carga.
Para empezar, crear una aplicación React de demostración. A continuación, ejecute el siguiente comando para activar el servidor de desarrollo y navegue hasta http://localhost: 3000 en su navegador para ver los resultados.
inicio de npmA continuación, ejecute este comando para instalar Axios, una biblioteca de JavaScript utilizada para realizar solicitudes HTTP desde el navegador.
npm instalar axiosCargar archivos de imagen mediante el punto final de la API de Cloudinary
Después de configurar la aplicación React, cree un componente de carga que realice una solicitud POST al extremo de la API de Cloudinary para cargar archivos de imagen en el almacenamiento en la nube de Cloudinary. Luego, desestructurará la respuesta de la API para mostrar la imagen cargada.
Crear un componente de carga
En el directorio /src, cree una nueva carpeta y asígnele el nombre components. En esta carpeta, cree un nuevo archivo, Upload.js.
En el archivo Upload.js, agregue el siguiente código:
importar Reaccionar, {usar estado} de'reaccionar';
importar Axios de"axíos";funciónSubir() {
constante [subirArchivo, configurarSubirArchivo] = usarEstado("");
constante [cloudinaryImage, setCloudinaryImage] = useState("")constante handleUpload = (mi) => {
e.preventDefault();
constante formularioDatos = nuevo Datos de formulario ();
formData.append("archivo", subir archivo);
formData.append("upload_preset", "tu nombre preestablecido de carga");Axios.post(
" https://api.cloudinary.com/v1_1/your Nube nubosa nombre/imagen/carga",
formularioDatos
)
.entonces((respuesta) => {
consola.log (respuesta);
setCloudinaryImage (response.data.secure_url);
})
.atrapar((error) => {
consola.log (error);
});
};
devolver ("Aplicación">"lado izquierdo">
Esto es lo que hace el código de carga:
- Declara dos estados, subir archivo y cloudinaryImage. Los utiliza para almacenar el archivo cargado y la imagen resultante de Cloudinary.
- El campo de entrada le permite seleccionar un archivo de imagen del sistema de archivos de su máquina. Cuando selecciona un archivo, actualiza el valor de la variable uploadFile.
- El manejarSubir La función utiliza Axios para realizar una solicitud posterior a Cloudinary. Transfiere el archivo cargado y el ajuste preestablecido de carga que ha asociado con su cuenta en la nube de Cloudinary. Al hacer clic en el botón Enviar, se llama a esta función.
- Cuando el código recibe una respuesta, almacena la URL_segura de la imagen de Cloudinary en estado.
- Finalmente, renderiza dos secciones, una para cargar el archivo y otra para mostrar la imagen resultante.
Importe y represente el componente upload.js en su archivo app.js. Debería ver una respuesta como esta en su navegador una vez que seleccione y cargue el archivo de imagen:
Dirígete a tu cuenta de Cloudinary y haz clic en el Mediateca pestaña para ver el archivo subido.
La integración del widget de Cloudinary en su aplicación React simplifica significativamente el proceso de carga. Además, el widget le permite cargar archivos de imágenes de varias fuentes, como Dropbox.
Para integrar el widget en su aplicación React, primero debe incluir la biblioteca JavaScript remota del widget en su archivo index.html en el directorio /public. Agregue la etiqueta de secuencia de comandos a continuación en la sección principal de su archivo index.html.
<guionorigen=" https://upload-widget.cloudinary.com/global/all.js"
tipo="texto/javascript">guion>A continuación, en su archivo upload.js, agregue los siguientes cambios:
- Importar lo siguiente Ganchos de reacción: useEffect y useRef.
importar {usarEstado, usarEfecto, usarRef} de'reaccionar'; - Agregue el código a continuación:
El código anterior crea una referencia al objeto Cloudinary y al widget de carga usando el gancho useRef. El gancho useEffect ejecuta el código dentro de la devolución de llamada una vez cuando se monta el componente. Luego inicializa el widget usando su nombre de nube y carga el nombre preestablecido y registra los resultados y errores que pueden ocurrir desde el widget.constante cloudinaryRef = useRef();
constante widgetRef = useRef();usarEfecto(() => {
cloudinaryRef.actual = ventana.nublado;
widgetRef.current = cloudinaryRef.current.createUploadWidget({
nombre de la nube: 'tu nombre de nube nuboso',
cargarPreset: 'el nombre preestablecido de carga'
}, (error, resultado) => {
consola.log (error, resultado)
});
}, []); - Finalmente, cree un botón que, cuando se haga clic, invocará y abrirá el widget de carga.
Sacar el máximo provecho de Cloudinary
Cloudinary proporciona una solución fácil de usar que simplifica el proceso de gestión de archivos de imágenes y otros recursos multimedia.
Además de proporcionar una plataforma de almacenamiento en la nube, Cloudinary también ofrece funciones como transformaciones de imágenes y optimización de imágenes. Estas son herramientas esenciales para mejorar la calidad de sus activos multimedia.
