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
Y este es mi component
y este es mi service
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
0