Как загрузить изображение вместе с другими данными в виде списка (form-data), используя класс dto для входящих данных на сервере?

Question

[sevic]

Класс dto входящих данных на сервере:

public class exampleDto {
    // валидация поля
    private MultipartFile file;
    // валидация поля
    private List<childDto> childList;
}

метод контроллера:

@PostMapping(path = "/create")
    public ResponseDto create(@Validated(OnCreate.class) @ModelAttribute exampleDto dto) throws IOException {
        return mapper.toDto(service.create(dto));
    }

Чтобы отправить данные с файлом нужно использовать 'Content-Type': 'multipart/form-data' и тогда данные которые были в виде json:

let childList = [
    {field1: 'text', field2: 'text'},
    {field1: 'text', field2: 'text'},
    ...
]

преобразуются в такой вид:

childList[0][field1] = 'text',
childList[0][field2] = 'text,
childList[1][field1] = 'text,
childList[1][field2] = 'text
...
и сервер выбрасывает исключение InvalidPropertyException

Какой тип данных нужно указать для поля, которое списком приходит?
Или лучше файл одним запросом отправлять, а остальные данные вторым запросом.

Comments

[Mikhail Osher]

Уберите тэг React.

[faketri]

Есть решение?

Answer 1

[faketri]

Всем привет. Два дня провозился с данной ошибкой. Надеюсь это кому то поможет. Данная вариация в моем случае полностью работает. Так же приложу ссылку на git репозиторий https://github.com/faketri/OnlineMarket

@RequestMapping(value = "/save", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public void save(
            @RequestPart("product") final ProductCreateRequest productCreateRequest,
            @RequestPart("images")  final List<MultipartFile> images) {
        Product product = new Product();

        System.out.println(productCreateRequest);

        product.setBrand(productCreateRequest.getBrand());
        product.setCategories(productCreateRequest.getCategories());
        product.setPrice(productCreateRequest.getPrice());
        product.setQuantity(productCreateRequest.getQuantity());
        product.setNameModel(productCreateRequest.getNameModel());

        int iterator = 0;
        String resoursePath = new ClassPathResource("/src/main/resources/images/").getPath();
        for (MultipartFile image : images) {
            String imageName = product.getNameModel()+ "-" + iterator + "-" + image.getOriginalFilename();
            System.out.println(imageName);
            try {
                image.transferTo(Paths.get(resoursePath + imageName));
            } catch (IOException e) {
                e.printStackTrace();
                return;
            }
            product.getImage().add(new Image(null, imageName));
        }
        System.out.println(product);
        productService.save(product);
    }

// Получение файлов
const handleFileSelect = (event) => {
  // Получить выбранные файлы
  const files = event.target.files;
  // Сохранить файлы в переменной
  selectedFiles = files;
};
// Отправка на сервер
saveProduct(product: any, images: any) {
    const formData = new FormData();
    formData.append("product", JSON.stringify(product));

    for (let i = 0; i < images.length; i++) {
      console.log(images);
      formData.append("images", images[i]);
    }

    $axios({
      method: "post",
      url: "/product/save",
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
      .then((response) => {
        console.log(response);
        // Обработка успешного ответа
      })
      .catch((error) => {
        console.log(error);
        // Обработка ошибки
      });
  },