Angular - Como enviar archivos (imagenes, video) desde angular al backend con forms reactivos usando Formdata

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

Como enviar archivos (imagenes, video) desde angular al backend con forms reactivos usando Formdata

Publicado por Carlos Andres (1 intervención) el 06/07/2020 01:26:18
Hola, tengo una api en strapi con una coleccion basica con campos como nombre, apellido y foto. Estoy usando angular 9, puedo enviar todos los datos menos la foto. Soy novato y quisiera que me yuden, gracias.

Este es mi html angular
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form [formGroup]="form" novalidate (submit)="addstudent()">
  <p>
    Name: <br/>
    <input type="text" formControlName="name" >
  </p>
  <p>
    Apellido: <br/>
    <input type="text" formControlName="lastname">
  </p>
  <p>
    Foto: <br/>
    <input type="file" formControlName="photo" >
  </p>
 
  <button type="submit" [disabled]="form.invalid" >Guardar</button>
 
</form>

Y este es mi component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
addstudent(){
    const values = this.form.value;
    console.log('data',values);
    let formData = new FormData();
    for(const file of values.photo){
      formData.append('photo', file.file);
    }
    delete values.photo;
    console.log('data', values);
    formData.append('data', JSON.stringify(values));
    this.studentService.saveAll(formData).subscribe
      (res =>{
        console.log(res);
      },
      error =>{
        console.log(error);
      });
  }

y este es mi service
1
2
3
4
5
6
7
8
9
10
export class StudentService {
 
  constructor( private httpClient: HttpClient) { }
 
  readonly URI_API = 'http://localhost:1337/students/';
 
  saveAll(data){
    return this.httpClient.post(this.URI_API,data);
  }
}
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