Node.js - Subir imagenes desde angular a nodejs

 
Vista:
sin imagen de perfil
Val: 3
Ha disminuido 1 puesto en Node.js (en relación al último mes)
Gráfica de Node.js

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzer0x
Val: 31
Ha disminuido 1 puesto en Node.js (en relación al último mes)
Gráfica de Node.js

Subir imagenes desde angular a nodejs

Publicado por abzer0x (1 intervención) el 06/12/2018 22:50:53
Hola Jose, en lo personal te recomiendo que utilices la ultima opción, es decir, guardar únicamente la ruta a la imágen y esta guardarla en una carpeta en el server. Y si van hacer muchas, como en el caso de un galería puedes utilizar array.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar