diegoofernandez
Beta
Redactor
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas, con este aporte te quiero mostrar una forma fácil de cargar imágenes y archivos con Angular.
He visto en varios lugares que esta acción no esta muy bien explicada en español de una manera realmente sencilla usando las últimas versiones de Angular, más que nada desde que salio Angular 2 a la fecha.
Así que aquí mi pequeño aporte, el código que les mostraré es el que uso en mis proyectos y funciona 100% y les puede ser útil el código para una base de la cual partir e implementar el uso de Observable's y cargas asíncronas.
Bien, primero veamos el código para que vean que no es nada complicado (ya que es casi un mito la complejidad de la carga de archivos en Angular), luego paso a explicarlo.
1) - Código html del formulario con el campo tipo File:
2) - Código del servicio que utilizaremos para enviar la imagen al servidor:
3) - Código del componente Angular que utilizamos:
Y ese es todo el código por el momento (más abajo veremos como procesar la imagen en el server).
Explicación código HTML:
El primer código que tenemos es el campo de tipo file en donde usamos la directiva (change), para entender rápidamente: esta directiva lo que va a hacer es disparar un evento cada vez que se produzca un cambio en el elemento, tal evento será manejado por la función que le indiquemos ( cargandoImagen() ) como parámetro a la directiva y por supuesto esa función la tenemos declarada en nuestro componente.
El parámetro '$event.target.files' que le enviamos a la función es una referencia a las imágenes que cargamos, es decir $event.target lo que hace es recolectar los elementos que en este caso son imágenes o archivos.
Explicación del servicio que envía la imagen al servidor (CargaImagenService.service.ts):
Si tienes visto algo de angular, comprenderás que no hay nada del otro mundo en este servicio, tenemos una variable (url_servidor) donde almacenamos la url del archivo que manejara la carga de imágenes.
Lo interesante de este simple servicio es lo que sucede con la función 'postFileImagen' donde le indicamos que recibirá un parámetro de tipo File, es decir la imagen que le pasaremos al método. Luego en el cuerpo de la función creamos un objeto de tipo 'FormData' y usamos el método 'append()' para agregarle la imagen (recordemos que append agrega datos de forma clave => valor), los 3 parámetros que le pasamos al método append:
El primer parámetro es el nombre del archivo que enviamos, es decir, el nombre con el cual tenemos que manejar el archivo en el servidor. Ejemplo: $_FILES['imagenPropia'].
El segundo parámetro es la imagen en si misma (append procesará esto como un tipo Blob, pero con que comprendamos que en este caso este parámetro es la imagen en si, suficiente).
Y el tercer parámetro es opcional y es el nombre de la imagen. Yo le paso este parámetro por "buena práctica", pero si no quieres no es necesario el tercer parámetro.
Bien, y eso es todo lo que tenemos que hacer con nuestro servicio, ahora pasemos al componente.
Explicación código del componente:
En el componente no hay nada del otro mundo pero la función cargandoImagen se vuelve interesante por su simplicidad y por lo que logra, vemos que le pasamos un parámetro de tipo FileList que le indica que esta función va a recibir todas las imágenes que carguemos con el input File de nuestro html.
La primer línea de la función es la siguiente:
this.enviandoImagen.postFileImagen(files[0]).subscribe()
En esta línea de código lo que hacemos es utilizar el servicio que inyectamos en el constructor de nuestro componente y llamar al método 'postFileImagen' del servicio, y le pasamos la imagen para que el método envíe la imagen al servidor y ya tendríamos terminado nuestro código para poder subir imágenes al servidor.
Bien ahora para completar el tutorial vamos a ver como procesar esa imagen con php:
Esta parte de php no la explicare por que no tiene nada de complejo, puede ser que desconozcas ciertas partes del script y obviamente deja tu comentario si es así, y por supuesto te ayudare, pero para no hacer más largo este texto simplemente pongo el script que sería funcional al código de Angular ya explicado:
SCRIPT PHP:
Otra cosa a tener en cuenta es, NO te olvides de importar el servicio que enviará la imagen al servidor dentro de tu app.module.ts
Ojala este tutorial te sea útil, como ves no es demasiado complejo y es una manera sencilla y correcta de enviar imágenes y archivos al servidor con las últimas versiones de Angular. Cualquier duda escribe que te la responderé. Saludos!
He visto en varios lugares que esta acción no esta muy bien explicada en español de una manera realmente sencilla usando las últimas versiones de Angular, más que nada desde que salio Angular 2 a la fecha.
Así que aquí mi pequeño aporte, el código que les mostraré es el que uso en mis proyectos y funciona 100% y les puede ser útil el código para una base de la cual partir e implementar el uso de Observable's y cargas asíncronas.
Bien, primero veamos el código para que vean que no es nada complicado (ya que es casi un mito la complejidad de la carga de archivos en Angular), luego paso a explicarlo.
1) - Código html del formulario con el campo tipo File:
HTML:
<input type="file" (change)="cargandoImagen($event.target.files)" multiple>2) - Código del servicio que utilizaremos para enviar la imagen al servidor:
Insertar CODE, HTML o PHP:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export class CargaImagenService{
public url_servidor = "http://servicioremoto.com/cargando-imagen.php";
constructor(private http: HttpClient){}
public postFileImagen(imagenParaSubir: File){
const formData = new FormData();
formData.append('imagenPropia', imagenParaSubir, imagenParaSubir.name);
return this.http.post(this.url_servidor, formData);
}
}3) - Código del componente Angular que utilizamos:
Insertar CODE, HTML o PHP:
import { Component } from '@angular/core';
import { CargaImagenService } from './services/cargaImagenService.service';
@Component({
templateUrl: 'tu template html',
stylesUrl: ['tus archivos css']
})
export class MiComponente{
public respuestaImagenEnviada;
public resultadoCarga;
constructor(private enviandoImagen: CargaImagenService){}
public cargandoImagen(files: FileList){
this.enviandoImagen.postFileImagen(files[0]).subscribe(
response => {
this.respuestaImagenEnviada = response;
if(this.respuestaImagenEnviada <= 1){
console.log("Error en el servidor");
}else{
if(this.respuestaImagenEnviada.code == 200 && this.respuestaImagenEnviada.status == "success"){
this.resultadoCarga = 1;
}else{
this.resultadoCarga = 2;
}
}
},
error => {
console.log(<any>error);
}
);//FIN DE METODO SUBSCRIBE
}
}Y ese es todo el código por el momento (más abajo veremos como procesar la imagen en el server).
Explicación código HTML:
El primer código que tenemos es el campo de tipo file en donde usamos la directiva (change), para entender rápidamente: esta directiva lo que va a hacer es disparar un evento cada vez que se produzca un cambio en el elemento, tal evento será manejado por la función que le indiquemos ( cargandoImagen() ) como parámetro a la directiva y por supuesto esa función la tenemos declarada en nuestro componente.
El parámetro '$event.target.files' que le enviamos a la función es una referencia a las imágenes que cargamos, es decir $event.target lo que hace es recolectar los elementos que en este caso son imágenes o archivos.
Explicación del servicio que envía la imagen al servidor (CargaImagenService.service.ts):
Si tienes visto algo de angular, comprenderás que no hay nada del otro mundo en este servicio, tenemos una variable (url_servidor) donde almacenamos la url del archivo que manejara la carga de imágenes.
Lo interesante de este simple servicio es lo que sucede con la función 'postFileImagen' donde le indicamos que recibirá un parámetro de tipo File, es decir la imagen que le pasaremos al método. Luego en el cuerpo de la función creamos un objeto de tipo 'FormData' y usamos el método 'append()' para agregarle la imagen (recordemos que append agrega datos de forma clave => valor), los 3 parámetros que le pasamos al método append:
El primer parámetro es el nombre del archivo que enviamos, es decir, el nombre con el cual tenemos que manejar el archivo en el servidor. Ejemplo: $_FILES['imagenPropia'].
El segundo parámetro es la imagen en si misma (append procesará esto como un tipo Blob, pero con que comprendamos que en este caso este parámetro es la imagen en si, suficiente).
Y el tercer parámetro es opcional y es el nombre de la imagen. Yo le paso este parámetro por "buena práctica", pero si no quieres no es necesario el tercer parámetro.
Bien, y eso es todo lo que tenemos que hacer con nuestro servicio, ahora pasemos al componente.
Explicación código del componente:
En el componente no hay nada del otro mundo pero la función cargandoImagen se vuelve interesante por su simplicidad y por lo que logra, vemos que le pasamos un parámetro de tipo FileList que le indica que esta función va a recibir todas las imágenes que carguemos con el input File de nuestro html.
La primer línea de la función es la siguiente:
this.enviandoImagen.postFileImagen(files[0]).subscribe()
En esta línea de código lo que hacemos es utilizar el servicio que inyectamos en el constructor de nuestro componente y llamar al método 'postFileImagen' del servicio, y le pasamos la imagen para que el método envíe la imagen al servidor y ya tendríamos terminado nuestro código para poder subir imágenes al servidor.
Bien ahora para completar el tutorial vamos a ver como procesar esa imagen con php:
Esta parte de php no la explicare por que no tiene nada de complejo, puede ser que desconozcas ciertas partes del script y obviamente deja tu comentario si es así, y por supuesto te ayudare, pero para no hacer más largo este texto simplemente pongo el script que sería funcional al código de Angular ya explicado:
SCRIPT PHP:
PHP:
if(isset($_FILES['imagenPropia'])){
$imagen_tipo = $_FILES['imagenPropia']['type'];
$imagen_nombre = $_FILES['imagenPropia']['name'];
$directorio_final = "../micarpeta/".$imagen_nombre;
if($imagen_tipo == "image/jpeg" || $imagen_tipo == "image/jpg" || $imagen_tipo == "image/png"){
if(move_uploaded_file($_FILES['imagenPropia']['tmp_name'], $directorio_final)){
$data = array(
'status' => 'success',
'code' => 200,
'msj' => 'Imagen subida'
);
$format = (object) $data;
$json = json_encode($format);
echo $json;
}else{
$data = array(
'status' => 'error',
'code' => 400,
'msj' => 'Error al mover imagen al servidor'
);
$format = (object) $data;
$json = json_encode($format);
echo $json;
}
}else{
$data = array(
'status' => 'error',
'code' => 500,
'msj' => 'Formato no soportado'
);
$format = (object) $data;
$json = json_encode($format);
echo $json;
}
}else{
$data = array(
'status' => 'error',
'code' => 400,
'msj' => 'No se recibio ninguna imagen'
);
$format = (object) $data;
$json = json_encode($format);
echo $json;
}Otra cosa a tener en cuenta es, NO te olvides de importar el servicio que enviará la imagen al servidor dentro de tu app.module.ts
Ojala este tutorial te sea útil, como ves no es demasiado complejo y es una manera sencilla y correcta de enviar imágenes y archivos al servidor con las últimas versiones de Angular. Cualquier duda escribe que te la responderé. Saludos!
