Header Ads Widget

Ticker

6/recent/ticker-posts

Angular 10 carga varios archivos / imágenes por ejemplo con eventos de progreso

 La carga de archivos e imágenes es un problema común en el desarrollo web y, a menudo, encontrará un requisito para implementar la carga de archivos en sus aplicaciones. Dependiendo de su marco o biblioteca elegidos. Por ejemplo, Angular, React o Vue, tendrá diferentes técnicas para cargar archivos, pero hay cosas en común, ya que todas estas herramientas son esencialmente herramientas del lado del cliente que se construyen sobre JavaScript, como usar la estructura FormData para crear un formulario en JavaScript o TypeScript y enviar datos de varias partes a los servidores.

Si bien React y Vue.js no tienen su propio cliente HTTP, Angular viene con un HttpClient integrado con funciones avanzadas como informes de progreso e interceptores.

Básicamente, usaría Angular HttpClient con FormData para enviar solicitudes al servidor para cargar archivos únicos o múltiples.

También debe usar varios artefactos, como los servicios Angular para encapsular el código para cargar archivos y los componentes Angular para construir la IU de carga de archivos.

Para diseñar la interfaz de usuario. tiene una gran cantidad de opciones, como Material angular, Bootstrap y Tailwind, etc., siendo las primeras opciones las más populares.

En este artículo, aprenderemos sobre los conceptos de Angular utilizados para la carga de archivos e imágenes, incluido un tutorial paso a paso sobre cómo implementar la carga de archivos con la última versión de Angular 10 y Bootstrap 4.

Angular es una plataforma completa para crear aplicaciones JavaScript del lado del cliente, también conocidas como aplicaciones de una sola página. En realidad, está escrito en TypeScript por un equipo de desarrolladores de Google e incluye bibliotecas integradas para problemas comunes de desarrollo web, como enviar solicitudes HTTP y manejar el envío y validación de formularios.

Cómo funciona la carga de archivos / imágenes en Angular

Angular proporciona muchos módulos integrados que puede utilizar para realizar cargas de archivos e imágenes.

Dependiendo de los requisitos de su caso de uso, es posible que deba modificar más o menos código, pero en pocas palabras, estos son los componentes básicos de cualquier funcionalidad de carga de archivos en sus aplicaciones.

FormData: encapsular datos de archivo

FormData es una API HTML5 que está incorporada en los navegadores web modernos y no es específica de Angular. Le permite crear objetos para almacenar pares clave-valor que corresponden a un formulario HTML. Puede verse como la forma JavaScript de crear formularios para enviar datos, incluidos archivos, a servidores API REST a través de HTTP.

Puede crear un objeto FormData utilizando el siguiente código:

const formData = new FormData ();

Después de crear la instancia, puede agregar pares clave-valor de datos y archivos que necesita enviar o cargar al servidor que expone un punto final de la API REST.

HttpClientModule: carga de archivos / imágenes con solicitudes HTTP

HttpClientModule es un módulo integrado que contiene el servicio HttpClient para enviar solicitudes HTTP y obtener respuestas de los servidores HTTP. Se basa en la interfaz XMLHttpRequest disponible en todos los navegadores web. Proporciona funciones adicionales como interceptores y solicitudes y respuestas escritas.

Tutorial de carga de varios archivos / imágenes

A lo largo de este tutorial, aprenderemos cómo implementar la carga de múltiples archivos e imágenes con Angular 10 y versiones anteriores, incluidas Angular 9, Angular 8 y Angular 7.

Veremos paso a paso cómo construir una aplicación Angular 10 de ejemplo con barras de progreso generadas con Angular CLI, diseñada con Bootstrap 4 para cargar múltiples archivos o imágenes.

Dado que Angular es un marco de JavaScript del lado del cliente, usaremos FormData para enviar archivos o datos de imagen al servidor API.

Implementación de carga de archivos múltiples con Angular 10 y FormData

En este tutorial, creará una aplicación Angular 10 que le permitirá cargar varios archivos / imágenes en un servidor de archivos. La aplicación mostrará una barra de progreso para cada uno de los archivos que se cargan en el servidor.

Herramientas y bibliotecas

Usaremos las siguientes herramientas para crear nuestra demostración de carga de archivos:

  • CLI angular 10
  • Bootstrap 4

Punto final del servidor de API REST para carga de archivos

En esta parte, no vamos a crear la aplicación del servidor para la carga de archivos porque esto está fuera del alcance de Angular. Puede usar cualquier lenguaje del lado del servidor para construir sus servidores de API REST como Python con Django o Flask, Node.js con Express o PHP.

Publicar un comentario

0 Comentarios