Subir imagenes desde angular a nodejs
Publicado por jose angel (3 intervenciones) el 05/12/2018 21:02:18
Hola muy buenas, estoy haciendo una pagina web con angular y nodejs, quiero que los trabajadores que se registren tengan la opcion de guardar una foto de perfil, entonces tengo un formulario de angular (ngForm) y tal y le he metido un input file para la subida de imagen, hasta ahi bien.
el schema que esto intentando hacer es el siguiente , que no acaba de compilar bien:
como se puede apreciar ahi lo que intento es que la imagen que suba el empleado al registrarse en el formulario quede guardada en nodejs para cuando vaya a su perfil salga su imagen, pero ese es otrro tema por ahora quiero poder guardarla.
Ahora os pregunto ¿Es correcto tener el schema definido de essa manera, es decir , con el campo imagen tipo file o deberia ser de tipo string para que solo guarde la direccion de donde se guardo y mediante programacion en tiempo de ejecucion en si de la app lo cargue?
¿Como podria hacerlo de forma correcta el tema de subir fichero, me imagino que tendria que crear dentro de la app una arpeta llamada imagenes donde suba todas las imagenes?
¿Y si quiero que cada trabajador tenga una foto de perfil y un numero indeterminado de fotos como una especie de galeria , tendria que hacer un array de direcciones en el schema?
Bueno muchas gracias, espero que me puedan ayudar a entender esto mejor para poder continuar.
Mil gracias a todos.
Por la parte del frontend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<style>
mat-form-field {
width: 60%;
margin-bottom: 8px;
font-size: 20px;
} #botonera a {
margin: 8px; }</style>
<div class="col-lg-12">
<h2 style="text-align: center">Creacion de empleado</h2>
</div>
<div class="col-lg-12" style=" text-align: center">
<form #formulario="ngForm" action="" (ngSubmit)="insertarEmpleado()" ngForm>
<div class="example-container">
<mat-form-field hintLabel="">
<input matInput #input maxlength="9" placeholder="DNI" pattern="(([X-Z]{1})([-]?)(\d{7})([-]?)([A-Z]{1}))|((\d{8})([-]?)([A-Z]{1}))"
[(ngModel)]="empleado_nuevo.dni" name="dni">
</mat-form-field>
<!-- [ngModel]="empleado_nuevo.nombre" --><mat-form-field hintLabel="">
<input matInput #input type="text" placeholder="Nombre" pattern="[a-zA-Z\s]+" [(ngModel)]="empleado_nuevo.nombre" name="nombre">
</mat-form-field>
<mat-form-field hintLabel="">
<input matInput #input type="text" placeholder="Apellidos" pattern="[a-zA-Z\s\-]+" [(ngModel)]="empleado_nuevo.apellidos"
name="apellidos">
</mat-form-field>
<mat-form-field hintLabel="">
<input matInput #input type="text" placeholder="Departamento" pattern="[a-zA-Z\s]+" [(ngModel)]="empleado_nuevo.departamento"
name="departamento">
</mat-form-field>
<mat-form-field hintLabel="">
<input matInput #input type="number" min="0" placeholder="Sueldo" [(ngModel)]="empleado_nuevo.sueldo" name="sueldo">
</mat-form-field>
<mat-form-field hintLabel="">
<input matInput #input type="date" placeholder="Fecha de nacimiento" [(ngModel)]="empleado_nuevo.fecha_nacimiento" name="fecha_nacimiento">
</mat-form-field>
<div style="text-align: center" class="col-lg-12">
<input type="file" placeholder="Imagen de perfil" [(ngModel)]="empleado_nuevo.imagen_perfil" name="imagen_perfil" style="margin:0 auto; width: 300px;margin-bottom: 45px;">
</div>
<!--======--><div id="botonera">
<button mat-raised-button color="primary" (click)="insertarEmpleado()">Enviar</button>
<button mat-raised-button (click)="limpiarFormulario(formulario)">Limpiar</button>
</div>
</div>
</form>
</div>
Por la parte del backend tengo lo siguiente :
el schema que esto intentando hacer es el siguiente , que no acaba de compilar bien:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const mongoose = require('mongoose');
const {Schema,File} = mongoose;
const empleado_schema = new Schema({
dni:{type:String,required:true, unique:true},
nombre:{type:String, required:true},
apellidos:{type:String, required:true},
departamento:{type:String, required:true},
sueldo:{type:String, required:true},
fecha_nacimiento:{type:Date, required:true},
imagen_perfil:{type:File,required:true}
});
module.exports = mongoose.model('tbEmpleadosss',empleado_schema);
como se puede apreciar ahi lo que intento es que la imagen que suba el empleado al registrarse en el formulario quede guardada en nodejs para cuando vaya a su perfil salga su imagen, pero ese es otrro tema por ahora quiero poder guardarla.
Ahora os pregunto ¿Es correcto tener el schema definido de essa manera, es decir , con el campo imagen tipo file o deberia ser de tipo string para que solo guarde la direccion de donde se guardo y mediante programacion en tiempo de ejecucion en si de la app lo cargue?
¿Como podria hacerlo de forma correcta el tema de subir fichero, me imagino que tendria que crear dentro de la app una arpeta llamada imagenes donde suba todas las imagenes?
¿Y si quiero que cada trabajador tenga una foto de perfil y un numero indeterminado de fotos como una especie de galeria , tendria que hacer un array de direcciones en el schema?
Bueno muchas gracias, espero que me puedan ayudar a entender esto mejor para poder continuar.
Mil gracias a todos.
Valora esta pregunta
0
