Mira, mi recomendación es que no realices almacenamientos de imagenes o archivos de cualquier indole en tu BD, esto porque puede ocurrir una serie de problemas al tratar de almacenarlos:
- El tiempo de acceso a los archivos es mucho mas lento que desde el Filesystem
- Incremento en el tamaño de la base de datos (entre mas archivos tengas los backups son mucho mas lentos.
- Acceso diferido a los archivos, esto ocurre al persistir los archivos en una base de datos, para accederlos siempre se requerirá de un cliente de base de datos que lea el contenido y luego nos lo presente en forma de archivo. En el caso de filesystem podremos acceder directamente a los archivos físicos.
- Mayor complejidad, dado que la la persistencia en base de datos requiere un mayor conocimiento técnico y más código/procesos/validaciones que en el caso del filesystem.
- Aumento de los requerimientos de infraestructura: se requiere de mayor memoria RAM, procesador, espacio en disco, etc., requerimientos especificados por el DBMS a ser utilizado en la persistencia de archivos (en la práctica, por lo general ya estamos usando un DBMS para nuestro sistema, por lo que el incremento en infraestructura no suele ser considerable, distinto sería si tuvieramos que considerar implementar persistencia en base de datos en un sistema que no utiliza una base de datos).
Todo esto son los puntos que deberías tener en cuenta al tratar de almacenar información tan compleja en tu base de datos. Por lo que desde mi experiencia lo mejor es que los archivos los almacenes de forma ordenada en tu servidor, por ejemplo:
- assets/images/company/nike/shoes/season_2019/name_shoe.jpg
- assets/images/company/tesla/cars/model_2019/tesla_2040.jpg
Esto falicitaría el mantenimiento de tu aplicación en cuanto a recursos del servidor.
Secuencia lógica
- Desde tu vista debes crear un
input
de tipo file
.
- El cliente debe escoger la imagen desde su equipo personal.
- El lenguaje (Angular) debe procesar la imagen.
- Se debe realizar una petición al servidor (PHP, NODEJS, PYTHON, etc) y este recibirá la información obtenida por el cliente.
- Validar si la imagen es valida y no están tratando de enviarnos un archivo malicioso (esto también deberías tenerlo en cuenta en el cliente como una especie de filtro)
- Validar que la carpeta existe y mover el archivo a la carpeta destino.
- Almacenar la dirección de almacenamiento de la imagen en nuestra base de datos.
Pregunta
¿Entonces como puedo subir mi archivo al servidor?
Vista
<input id="file-upload" type="file" (change)="fileSelected($event)">
<button type="button" class="btn btn-success" (click)="subirArchivo()">
Subir Imagen
</button>
Typescript
import { HttpClient } from '@angular/common/http';
//Declaracion de interfaces
interface myData
{
mensaje: string;
};
//Funcion que procesa un evento para subir archivos al servidor
fileSelected(event)
{
this.selectedFile = <File>event.target.files[0];
};
subirArchivo()
{
const formData = new FormData();
formData.append('file', this.selectedFile);
if (this.selectedFile == undefined)
{
window.alert("Se debe seleccionar alguna imagen para poder realizar la subida del archivo al servidor.")
return;
}
else
{
//Metodo POST
this.http.post<myData>('authentication/subirArchivoLogo.php', formData)
.subscribe(data=>
{
//Respuesta del servidor
console.log("Data: ", data);
});
}
};
Nota: Todo esto es solo un pequeño ejemplo de lo que deberías realizar en tu componente Angular. En tu lenguaje de servidor deberías indagar e investigar un poco mas sobre el como lo podrías hacer. Si necesitas algo más, no dudes en preguntar.