Angular и Spring Boot: ошибка 415 неподдерживаемого типа носителя при отправке данных формы с изображением и объектом JS ⇐ JAVA

[Anonymous]

Поскольку я широко использовал другие источники, я прошу совета здесь.
Я хотел бы отправить данные из внешнего интерфейса (Angular - Typscript) в свой внутренний интерфейс (Java Springboot).
Данные включают в себя два строковых значения: массив объектов и файл изображения. Данные должны храниться в базе данных, только файл изображения должен храниться в локальной папке, и для каждого изображения image_url генерируется в серверной части и сохраняется в базе данных.
Для Отправка данных из службы во внешнем интерфейсе на контроллер. Я использую formData, которая должна содержать все данные. Однако в целях тестирования в настоящее время я отправляю только два строковых значения и файл изображения (а не массив объектов) внутри заданной структуры кода.
Однако я продолжаю получать 415 Ошибка неправильного типа содержимого, в которой говорится, что он не может обработать application/octet-stream, хотя использование formData должно автоматически доставлять его в необходимом multipart/form-data< /em>.
Возможно, кто-то сможет определить причину этого. Как ни странно, каждое изображение по-прежнему успешно сохраняется в назначенной локальной папке.
Сначала я передаю данные (recipeObj и formData) из компонента
private createRezeptObj(recipe: Recipe): any {

const rezeptObj = {
name: rezept.name,
onlineAdresse: rezept.onlineAdress,
image: this.newRecipe.image ? this.newRecipe.image : null
};

console.log('createRezeptObj', rezeptObj);
return rezeptObj;
}

saveRecipe(rezept: Rezept): Observable {

const recipeObj= this.createRecipeObj(this.newRecipe);
console.log('recipeObj:', recipeObj);
const formData = new FormData();

if (this.newRecipe.image instanceof File) {
formData.append('image', this.newRecipe.image);
} else {
console.warn('image not valid:', this.newRecipe.image);
}

return this.rezepteService.createRezept(rezeptObj, formData).pipe(
tap(response => {

this.newRecipeCreated.emit(this.newRecipe);
this.updateTagCount();
}),
catchError(error => {
console.error('Error when saving:', error);
return throwError(() => new Error('Error when saving'));
})
);
}

handleClick(event: Event) {
event.preventDefault();

const rezeptToSave = this.newRecipe;

this.saveRecipe(rezeptToSave).subscribe(
response => {
console.log('Recipe saved:', response);
this.router.navigate(['/listencontainer']);
},
error => {
console.error('Error in handleClick:', error);

}
);
}

и ответ на рецепт
export interface RecipeResponse {
id: number;
name: string;
onlineAdresse: string;
tags?: Tag[];
bildUrl?: string;
}

Сервис использует рецептObj для некоторых операций пользовательского интерфейса и передает только полученные данные формы на внутренний URL-адрес:
createRezept(recipe: Recipet, formData: FormData): Observable {

this.loadingSubject.next(true);

const imageFile = formData.get('image') as File;
rezept.image = imageFile ? imageFile : null;

console.log('In createRezept: FormData vor dem Senden in BE:', {
name: formData.get('name'),
onlineAdresse: formData.get('onlineAdress')
tags: formData.getAll('tags'),
image: imageFile ? imageFile : 'No image in recipe-service.ts/create',
});

formData.forEach((value, key) => {
console.log('struktur formData vor ins BE', key, value);
});

const file = formData.get('image') as File;
console.log('File-Typ:', typeof file, file instanceof File);

return this.http.post(`${this.backendUrl}/api/rezepte/create`, formData, {
observe: 'response'
}).pipe(
tap(response => {
console.log('Server Response:', response);
if (response.body) {
console.log('Response Body:', response.body);
const rezeptId = response.body.id;
}

Теперь здесь, в серверной части, никакой код внутри конечной точки createRecipe не выполняется, потому что он даже не доходит до этой точки для ошибки 415. Чтобы получить рецепт, я использую DTO.
@PostMapping(value = "/create", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity createRezept(
@RequestPart(value = "recipe", required = false) RecipeDTO recipeDTO,
@RequestPart(value = "image", required = false) MultipartFile image
) throws IOException {

РецептDTO:
package com.rezepte_app.dto;

import lombok.Builder;
import lombok.Data;
import lombok.Getter;

import java.util.Set;

@Data
@Builder
public class RezeptDTO {
private int id;
private String name;
private String onlineAdresse;
// Getter und Setter für tags
@Getter
private Set tags;
private String bildUrl;

// Standard-Konstruktor
public RezeptDTO() {
}

public RezeptDTO(int id, String name, String onlineAdresse, String
bildUrl) {
this.id = id;
this.name = name;
this.onlineAdress = onlineAdress;

this.bildUrl = bildUrl;
}

public String getBildUrl() {
return bildUrl;
}

public void setBildUrl(String bildUrl) {
this.bildUrl = bildUrl;
}


appplication.properties:
server.servlet.session.timeout=30m
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB


Подробнее здесь: https://stackoverflow.com/questions/791 ... formdata-w