Tengo una App con Angular y Springboot. La idea es poder crear una solicitud, en la que se pueda enviar un fichero PDF. A la hora de crearse la solicitud, el error que se muestra en la consola del navegador es este: POST http://localhost:4200/api/solicitudes 415 (Unsupported Media Type) HttpErrorResponse {headers: _HttpHeaders, status: 415, statusText: 'Unsupported Media Type', url: 'http://localhost:4200/api/solicitudes', ok: false,
En la terminal, se muestra el siguiente error: HttpMediaTypeNotSupportedException: Content-Type 'multipart/form-data;boundary=----WebKitFormBoundarygzD5Ndo4sz35KRS4;charset=UTF-8' is not supported]
Código de SolicitudService.java:
public Solicitud crearSolicitud(Solicitud solicitud, MultipartFile fichero) {
if (fichero != null && !fichero.isEmpty()) {
try {
// Guardar el archivo en el escritorio del servidor
String nombreArchivo = guardarArchivoEnEscritorio(fichero);
solicitud.setNombreArchivo(nombreArchivo);
} catch (IOException e) {
throw new RuntimeException("Error al guardar el archivo.", e);
}
}
solicitud.setFecha_solicitud(LocalDateTime.now());
solicitud.setEstado_solicitud(TipoEstado.EN_TRAMITE);
return solicitudRepository.save(solicitud);
}
Código de SolicitudController.java:
@RestController
@RequestMapping("/api/solicitudes")
public class SolicitudController {
@Autowired
private SolicitudService solicitudService;
@Autowired
private EmailService emailService;
@PostMapping(consumes = "multipart/form-data")
public ResponseEntity<Solicitud> crearSolicitud(@RequestPart("fichero") MultipartFile fichero, @RequestBody Solicitud solicitud) {
try {
Solicitud nuevaSolicitud = solicitudService.crearSolicitud(solicitud, fichero);
return new ResponseEntity<>(nuevaSolicitud, HttpStatus.CREATED);
} catch (Exception e) {
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
}
Para la parte de angular, tengo el siguiente código
fichero solicitud.service.ts:
crearSolicitud(solicitud: Solicitud, file:File): Observable<Solicitud> {
const formData = new FormData();
formData.append('solicitud', JSON.stringify(solicitud));
formData.append('fichero', file, file.name);
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
return this.http.post<Solicitud>(`${this.url}`, formData, {headers : headers});
}
fichero crear-solicitud.component.ts:
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { SolicitudService } from '../services/solicitud.service';
import { Solicitud } from '../models/Solicitud';
@Component({
selector: 'app-crear-solicitud',
templateUrl: './crear-solicitud.component.html',
styleUrls: ['./crear-solicitud.component.css']
})
export class CrearSolicitudComponent implements OnInit {
archivoSeleccionado: File | null = null;
constructor(private solicitudService: SolicitudService) {}
ngOnInit(): void {
}
onFileSelected(event: any): void {
this.archivoSeleccionado = event.target.files[0] as File;
}
crearSolicitud(solicitudForm: NgForm): void {
if (solicitudForm.valid && this.archivoSeleccionado) {
const solicitud: Solicitud = {
fecha_solicitud: new Date(solicitudForm.value.fecha_solicitud),
tipo_dia: solicitudForm.value.tipo_dia,
id: 0,
estado: '',
user_id: 0,
fichero: this.archivoSeleccionado
};
const formData = new FormData();
formData.append('fecha_solicitud', solicitud.fecha_solicitud.toString());
formData.append('tipo_dia', solicitud.tipo_dia);
formData.append('fichero', this.archivoSeleccionado, this.archivoSeleccionado.name);
console.log("Datos: ", formData);
this.solicitudService.crearSolicitud(solicitud, this.archivoSeleccionado).subscribe(
response => {
console.log("Solicitud creada con éxito:", response);
},
error => {
console.error("Error al crear la solicitud:", error);
}
);
} else {
console.log("El formato de los campos no es válido o no se ha seleccionado ningún archivo");
}
}
}